/* =======================================================
PLAYERPATH DESIGN SYSTEM v2.0
Sports-tech visual identity - violet/cyan on near-black.
======================================================= */

/* Visually hidden but still announced by screen readers -
   for form controls whose surrounding row already shows the
   label visually (e.g. an unlabeled checkbox next to a name). */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root{

    /* The whole app is a single, uniformly dark theme (no light
       mode exists anywhere) - this tells the browser to render
       native form chrome (date/time picker icons, the select
       dropdown arrow, spinner buttons, autofill) in its dark
       variant instead of the light default, which otherwise
       renders near-invisible on our dark input backgrounds. */
    color-scheme: dark;

    /* ===== DESIGN TOKENS ===== */

    /* Backgrounds */
    --bg-primary: #070A12;
    --bg-surface: #0D111C;
    --bg-elevated: #141927;
    --bg-elevated-2: #1A2033;
    --border-default: #22293A;
    --border-soft: #171D2C;

    /* Brand */
    --brand-violet: #7C5CFC;
    --brand-violet-strong: #9B82FF;
    --brand-violet-soft: rgba(124, 92, 252, 0.14);
    --brand-cyan: #22D3EE;
    --brand-cyan-soft: rgba(34, 211, 238, 0.14);
    --brand-gradient: linear-gradient(135deg, #7C5CFC 0%, #22D3EE 100%);

    /* Family-facing accent - defaults to the PlayerPath brand,
       but pages that render inside a specific academy's context
       (Parent Messages/Announcements) override these three at
       the page level from Academy.theme(), so bubbles/badges/
       highlights pick up that academy's own colour instead. */
    --msg-accent: var(--brand-violet);
    --msg-accent-gradient: var(--brand-gradient);
    --msg-on-accent: #070A12;

    /* registration.css is loaded on Academy Admin pages (see
       base.html) specifically to reuse .reg-consent/.reg-choice/
       .reg-option-card on settings screens (Branding, Field
       Rules, Recurring Sessions). That file's colors are always
       --reg-* custom properties meant to be set per-request from
       an academy's public-facing theme - on the public wizard
       and coach kiosk that happens inline, but on Admin pages
       nothing ever set them, so every one of these components
       rendered with a transparent background and an invisible
       checked/selected state. These fallbacks give them the
       same dark-premium look as the rest of the Admin UI. */
    --reg-bg: var(--bg-primary);
    --reg-surface: var(--pp-surface);
    --reg-elevated: var(--pp-surface-2);
    --reg-text: var(--text-primary);
    --reg-text-muted: var(--text-muted);
    --reg-accent: var(--brand-violet);
    --reg-on-accent: #ffffff;

    /* Text */
    --text-primary: #F7F8FC;
    --text-secondary: #929BAD;
    --text-muted: #606A7C;

    /* Status */
    --success: #2DD4A8;
    --success-soft: rgba(45, 212, 168, 0.14);
    --warning: #F5B942;
    --warning-soft: rgba(245, 185, 66, 0.14);
    --danger: #F05D6C;
    --danger-soft: rgba(240, 93, 108, 0.14);
    --info: #22D3EE;
    --info-soft: rgba(34, 211, 238, 0.14);

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-full: 999px;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 40px;

    /* Motion */
    --transition-fast: 0.12s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-default: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    /* Shadow */
    --shadow-sm: 0 2px 8px rgba(3, 5, 10, 0.3);
    --shadow-md: 0 10px 30px rgba(3, 5, 10, 0.4);
    --shadow-lg: 0 20px 50px rgba(3, 5, 10, 0.5);

    /* ===== LEGACY ALIASES =====
       The whole app was originally built on these variable
       names. Re-pointing them at the new tokens re-themes
       every existing rule without needing to touch each
       selector individually. New code should prefer the
       tokens above directly. */

    --yellow: var(--brand-violet);
    --yellow-hover: var(--brand-violet-strong);

    --black: var(--bg-primary);
    --background: var(--bg-primary);
    --card: var(--bg-surface);
    --card2: var(--bg-elevated);

    --white: var(--text-primary);

    --gray: var(--text-secondary);
    --gray2: var(--text-muted);

    --border: var(--border-default);

    --radius: var(--radius-lg);

    --shadow: var(--shadow-md);

    --pp-bg: var(--bg-primary);
    --pp-surface: var(--bg-surface);
    --pp-surface-2: var(--bg-elevated);
    --pp-surface-3: var(--bg-elevated-2);
    --pp-border: var(--border-default);
    --pp-border-soft: var(--border-soft);
    --pp-text: var(--text-primary);
    --pp-muted: var(--text-secondary);
    --pp-muted-2: var(--text-muted);
    --pp-accent: var(--brand-violet);
    --pp-accent-strong: var(--brand-violet-strong);
    --pp-accent-soft: var(--brand-violet-soft);
    --pp-success: var(--success);
    --pp-success-soft: var(--success-soft);
    --pp-danger: var(--danger);
    --pp-danger-soft: var(--danger-soft);
    --pp-info: var(--brand-cyan);
    --pp-info-soft: var(--brand-cyan-soft);
    --pp-shadow: var(--shadow-lg);

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

body{

font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
background:var(--bg-primary);
color:var(--text-primary);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;

}

a{

text-decoration:none;

}

button{

cursor:pointer;
border:none;
font-family: inherit;

}

/* ======================================================
ICON SYSTEM (Lucide)
====================================================== */

.icon,
[data-lucide] {
    width: 18px;
    height: 18px;
    stroke-width: 2px;
    flex-shrink: 0;
    vertical-align: -3px;
}

.icon-sm { width: 14px; height: 14px; }
.icon-lg { width: 24px; height: 24px; }
.icon-xl { width: 32px; height: 32px; }

/* ======================================================
TYPOGRAPHY SCALE
====================================================== */

h1, h2, h3, h4, h5, h6 {
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.text-display {
    font-size: 44px;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.text-page-title,
h1 {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.015em;
}

.text-section-title,
h2 {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
}

.text-card-title,
h3 {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}

.text-metric {
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.text-body {
    font-size: 14.5px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-secondary);
}

.text-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.text-caption {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-muted);
}

.text-gradient {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ======================================================
LOGIN
====================================================== */

.login-page{

display:flex;

justify-content:center;

align-items:center;

min-height:100vh;

padding:20px;

background:linear-gradient(145deg,#101010,#1d1d1d);

}

.login-card{

width:100%;

max-width:460px;

background:var(--card);

padding:45px;

border-radius:24px;

box-shadow:var(--shadow);

}

@media (max-width: 520px){

.login-card{

padding:30px 22px;

border-radius:18px;

}

}

.brand{

text-align:center;

margin-bottom:30px;

}

.logo{

width:120px;

margin-bottom:15px;

}

.login-header{

text-align:center;

margin-bottom:35px;

}

.login-header h2{

font-size:32px;

font-weight:800;

margin-bottom:8px;

}

.login-header p{

color:var(--gray);

}

.form-group{

display:flex;

flex-direction:column;

margin-bottom:22px;

}

.form-group label{

margin-bottom:10px;

font-size:14px;

font-weight:600;

color:var(--gray);

}

input,
select,
textarea{

width:100%;

padding:15px;

background:var(--bg-elevated);

border:1px solid #444;

border-radius:14px;

color:white;

font-size:15px;

transition:.3s;

}

input:focus,
select:focus,
textarea:focus{

outline:none;

border:1px solid var(--yellow);

box-shadow:0 0 0 3px rgba(124, 92, 252, .15);

}

/* Dim rather than recolor - opacity scales the existing
   background/text pair together, so contrast stays correct
   instead of drifting toward an unreadable combination the way
   a fixed "disabled gray" text color could on a dark input. */
input:disabled,
select:disabled,
textarea:disabled,
input[readonly],
textarea[readonly] {
    opacity: 0.6;
    cursor: not-allowed;
}

.form-options{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:30px;

font-size:14px;

}

.form-options a{

color:var(--yellow);

}

/* Scoped to .login-card - this was originally a bare `button{}`
   selector, so it silently styled every <button> in all 141
   templates (the single riskiest rule in the codebase: any new
   button anywhere without an explicit class inherited a full-width
   140% form submit style). Its only real consumers are the six
   login/password-reset submit buttons, which already live inside
   .login-card, so scoping it here is a behavior-preserving fix. */
.login-card button{

width:100%;

padding:16px;

background:var(--yellow);

border-radius:14px;

font-size:16px;

font-weight:700;

transition:.25s;

}

.login-card button:hover{

background:var(--yellow-hover);

transform:translateY(-2px);

}

.login-footer{

text-align:center;

margin-top:30px;

color:var(--gray2);

font-size:13px;

}

/* ======================================================
PORTAL CHOOSER
====================================================== */

.portal-chooser {
    width: 100%;
    max-width: 960px;
    background: var(--card);
    padding: 50px;
    border-radius: 24px;
    box-shadow: var(--shadow);
}

.portal-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.portal-choice-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 26px 22px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 18px;
    transition: 0.2s ease;
}

.portal-choice-card:hover {
    border-color: var(--yellow);
    transform: translateY(-3px);
}

.portal-choice-icon {
    font-size: 32px;
    margin-bottom: 6px;
}

.portal-choice-card h3 {
    font-size: 17px;
    font-weight: 800;
    margin: 0;
}

.portal-choice-card p {
    color: var(--gray);
    font-size: 13.5px;
    line-height: 1.5;
    margin: 0;
    flex-grow: 1;
}

.portal-choice-cta {
    margin-top: 12px;
    color: var(--yellow);
    font-weight: 700;
    font-size: 13.5px;
}

.portal-choice-platform {
    border-style: dashed;
}

@media (max-width: 800px) {
    .portal-choice-grid {
        grid-template-columns: 1fr;
    }

    .portal-chooser {
        padding: 32px 24px;
    }
}

.platform-login-card {
    border-top: 4px solid var(--yellow);
    position: relative;
}

.platform-badge {
    display: block;
    width: fit-content;
    margin: 0 auto 18px;
    padding: 5px 12px;
    background: rgba(124, 92, 252, 0.12);
    color: var(--yellow);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    border-radius: 999px;
}

/* ======================================================
LAYOUT
====================================================== */

.dashboard-layout{

display:flex;

min-height:100vh;

}

/* ======================================================
SIDEBAR
====================================================== */

.sidebar{

width:270px;

background:var(--black);

padding:30px;

border-right:1px solid var(--border);

}

/* .sidebar-brand/.sidebar-menu layout (display/flex-direction)
   still lives here; gap/margin/padding are consolidated into the
   "SIDEBAR PREMIUM" section below, which also owns .sidebar-logo,
   .menu-item and its hover/active states - see the comment there. */

.sidebar-brand{

display:flex;

align-items:center;

}

.sidebar-brand h2{

font-size:24px;

font-weight:800;

}

.sidebar-brand p{

color:var(--gray);

font-size:13px;

}

.sidebar-menu{

display:flex;

flex-direction:column;

}

/* .menu-item base/hover styling is consolidated into the
   "SIDEBAR PREMIUM" section below - see the comment there. */

.active{

background:var(--yellow);

color:var(--text-primary);

}

/* ======================================================
MAIN
====================================================== */

.dashboard-main{

flex:1;
min-width:0;

padding:45px;

}

/* ======================================================
HEADER
====================================================== */

/* .page-header / h1 / p were fully redefined (and fully
   shadowed) by the canonical block near "PLAYERPATH UNIFIED
   DARK THEME" below - see the comment there. The h1 font-size
   set here (36px) is the one property that block doesn't
   redeclare, so it's the only thing from this block that was
   still live; it now lives directly on the canonical rule. */

/* ======================================================
CARDS
====================================================== */

.dashboard-cards{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;

margin-bottom:35px;

}

.card{

background:var(--card);

padding:30px;

border-radius:20px;

box-shadow:var(--shadow);

}

.card h4{

color:var(--gray);

margin-bottom:10px;

}

.card h2{

font-size:36px;

}

/* ======================================================
TABLE
====================================================== */

.table-card{

background:var(--card);

padding:25px;

border-radius:20px;

box-shadow:var(--shadow);

overflow:auto;

}

table{

width:100%;

border-collapse:collapse;

}

/* Was a literal #2d2d2d/#333 - safe to move onto real tokens
   here because this rule is bare-element (table/th/td), and
   the Public Registration Wizard + Coach Attendance Kiosk never
   load this file at all (registration.css only, no <table>
   markup exists there either) - confirmed by grep before this
   change, so there is no white-label surface this can leak
   onto. */
thead{

background:var(--pp-surface-3);

}

th{

padding:18px;

text-align:left;

}

td{

padding:18px;

border-bottom:1px solid var(--pp-border-soft);

}

tbody tr:hover{

background:#2d2d2d;

}

/* ======================================================
BUTTONS
====================================================== */
/* .primary-action / .secondary-action / .danger-action are
   defined once, together, in the "Actions" section below
   (search for "Shared action-button layout") - this used to be
   a second, older definition that the newer rules silently
   overrode piece by piece. Consolidated so there's one source
   of truth instead of two partially-conflicting ones. */

/* ======================================================
FORMS
====================================================== */

.form-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:20px;

}

textarea{

resize:none;

}

/* ======================================================
SEARCH
====================================================== */

.search-box{

margin-bottom:25px;

}

.search-box input{

background:#2d2d2d;

}

/* ======================================================
RESPONSIVE
====================================================== */

@media(max-width:1200px){

.dashboard-cards{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:900px){

.sidebar{

display:none;

}

.dashboard-main{

padding:20px;

}

.form-grid{

grid-template-columns:1fr;

}

.dashboard-cards{

grid-template-columns:1fr;

}

}/* ======================================================
WIZARD
====================================================== */

/* Modernized in Lote 2a - same .wizard/.wizard-step/.circle
   class names and structure as before (the step JS in
   athletes/edit.html and create.html toggles active/completed
   on these exact classes), only the visual language changed:
   smaller hairline-bordered dots on a 1px connector instead of
   large glowing circles on a thick bar. */

.wizard{

display:flex;
justify-content:space-between;
align-items:flex-start;
gap:4px;
margin:0 0 28px;
position:relative;

}

.wizard::before{

content:"";

position:absolute;

left:5%;
right:5%;

top:15px;

height:1px;

background:var(--pp-border-soft);

z-index:0;

}

.wizard-step{

position:relative;

z-index:1;

display:flex;

flex-direction:column;

align-items:center;

gap:8px;

flex:1;

min-width:0;

}

.circle{

width:30px;

height:30px;

border-radius:50%;

background:var(--pp-surface-3);

display:flex;

justify-content:center;

align-items:center;

font-weight:800;

font-size:12.5px;

color:var(--text-muted);

border:1px solid var(--pp-border-soft);

transition:background .2s ease, color .2s ease, border-color .2s ease;

}

.wizard-step span{

font-size:11.5px;

font-weight:700;

color:var(--text-muted);

text-align:center;

white-space:nowrap;

}

.wizard-step.active .circle{

background:var(--brand-violet);

color:#fff;

border-color:var(--brand-violet);

}

.wizard-step.active span{

color:var(--text-primary);

}

.wizard-step.completed .circle{

background:var(--success);

color:#06110d;

border-color:var(--success);

}

.wizard-step.completed span{

color:var(--text-secondary);

}

@media (max-width:600px){
    .wizard-step span{
        display:none;
    }
}

.wizard-buttons{

display:flex;

justify-content:space-between;

margin-top:32px;

padding-top:20px;

border-top:1px solid var(--pp-border-soft);

}

/* ======================================================
ANIMATIONS
====================================================== */

.fade-in{

animation:fade .5s ease;

}

@keyframes fade{

from{

opacity:0;
transform:translateY(20px);

}

to{

opacity:1;
transform:translateY(0);

}

}

.slide-up{

animation:slide .4s ease;

}

@keyframes slide{

from{

opacity:0;
transform:translateY(30px);

}

to{

opacity:1;
transform:translateY(0);

}

}

.form-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:25px;

}

input:hover,
select:hover,
textarea:hover{

border-color:var(--brand-violet);

}

/* ======================================================
BADGES
====================================================== */

.badge{

display:inline-block;

padding:6px 14px;

border-radius:30px;

font-size:12px;

font-weight:700;

}

.badge-success{

background:var(--success);

color:white;

}

.badge-warning{

background:var(--warning);

color:var(--bg-primary);

}

.badge-danger{

background:var(--danger);

color:white;

}

/* ======================================================
TABLE EFFECT
====================================================== */

tbody tr{

transition:.25s;

}

tbody tr:hover{

transform:scale(1.01);

background:var(--bg-elevated);

}

/* ======================================================
CARDS PREMIUM
====================================================== */

.card{

transition:.25s;

}

.card:hover{

transform:translateY(-6px);

box-shadow:0 25px 50px rgba(0,0,0,.35);

}

/* ======================================================
SCROLLBAR
====================================================== */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#1d1d1d;

}

::-webkit-scrollbar-thumb{

background:var(--brand-violet);

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:var(--brand-violet-strong);

}/* ======================================================
ATHLETE PROFILE
====================================================== */

.profile-header{

display:flex;

align-items:center;

justify-content:space-between;

background:var(--card);

padding:35px;

border-radius:22px 22px 0 0;

box-shadow:var(--shadow);

}

.profile-hero-metrics {
    display: flex;
    align-items: center;
    background: var(--bg-elevated);
    border-top: 1px solid var(--border-default);
    border-radius: 0 0 22px 22px;
    padding: 20px 35px;
    margin-bottom: 30px;
    overflow-x: auto;
}

.hero-metric {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 90px;
}

.hero-metric-divider {
    width: 1px;
    height: 32px;
    background: var(--border-default);
    flex-shrink: 0;
}

@media (max-width: 700px) {
    .profile-hero-metrics {
        justify-content: flex-start;
        gap: 22px;
    }

    .hero-metric {
        flex: 0 0 auto;
    }
}

.profile-left{

display:flex;

align-items:center;

gap:25px;

}

.profile-photo{

width:130px;

height:130px;

border-radius:50%;

background:#303030;

border:5px solid var(--yellow);

display:flex;

align-items:center;

justify-content:center;

font-size:42px;

font-weight:700;

color:white;

overflow:hidden;

}

.profile-photo img{

width:100%;

height:100%;

object-fit:cover;

}

.profile-info h1{

font-size:34px;

font-weight:800;

margin-bottom:10px;

}

.profile-info p{

color:var(--gray);

margin-bottom:8px;

}

.player-id{

display:inline-block;

margin-top:15px;

padding:10px 18px;

background:var(--yellow);

color:var(--text-primary);

border-radius:30px;

font-weight:800;

letter-spacing:1px;

}

/* ======================================================
PROFILE GRID
====================================================== */

.profile-grid{

display:grid;

grid-template-columns:2fr 1fr;

gap:30px;

margin-top:30px;

}


/* ======================================================
STATISTICS
====================================================== */

.stats-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:20px;

}

.stat-card{

background:#2d2d2d;

padding:25px;

border-radius:16px;

text-align:center;

transition:.3s;

}

.stat-card:hover{

transform:translateY(-5px);

background:#333;

}

.stat-card h3{

font-size:36px;

color:var(--yellow);

margin-bottom:10px;

}

.stat-card p{

color:var(--gray);

}

/* ======================================================
PROGRESS
====================================================== */

.progress-item{

margin-bottom:22px;

}

.progress-item span{

display:flex;

justify-content:space-between;

margin-bottom:10px;

font-size:14px;

font-weight:600;

}

.progress{

height:8px;

background:var(--bg-elevated);

border-radius:30px;

overflow:hidden;

}

.progress-bar{

height:100%;

background:var(--brand-gradient);

border-radius:30px;

transition:0.6s cubic-bezier(0.4, 0, 0.2, 1);

}

/* ======================================================
PROFILE MENU
====================================================== */

/* Modernized in Lote 3 - was a heavy #2c2c2c chip where hover
   and active looked identical (both solid violet), so you
   couldn't tell "this is the current tab" from "my mouse
   happens to be over this one". Same .profile-menu/.profile-tab
   markup and structure everywhere it's used (Athletes/Coaches
   detail, Parent Portal, Super Admin academy profile) - only
   the CSS changed, so nothing needed to be redesigned again on
   any of those already-approved pages. */
.profile-menu{

display:flex;

gap:8px;

margin-bottom:22px;

flex-wrap:wrap;

}

.profile-tab{

padding:9px 16px;

background:var(--pp-surface);

border:1px solid var(--pp-border-soft);

border-radius:999px;

font-size:13px;

font-weight:700;

color:var(--text-secondary);

transition:border-color .15s ease, color .15s ease, background .15s ease;

}

.profile-tab:hover{

border-color:var(--pp-border);

background:var(--pp-surface-2);

color:var(--text-primary);

}

.profile-tab.active{

background:var(--pp-accent-soft);

border-color:var(--brand-violet);

color:var(--brand-violet);

}

/* ======================================================
BREADCRUMBS
====================================================== */

.breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
    font-size: 12.5px;
}

.breadcrumbs a {
    color: var(--text-secondary);
    transition: var(--transition-fast);
}

.breadcrumbs a:hover {
    color: var(--brand-cyan);
}

.breadcrumb-current {
    color: var(--text-primary);
    font-weight: 600;
}

.breadcrumb-sep {
    width: 13px;
    height: 13px;
    color: var(--text-muted);
}

@media (max-width: 480px) {
    .breadcrumbs {
        display: none;
    }
}

/* ======================================================
STATUS GRID (Next Training / Next Match, etc.)
====================================================== */

.status-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 20px;
}

@media (max-width: 700px) {
    .status-grid {
        grid-template-columns: 1fr;
    }
}

/* ======================================================
TIMELINE
====================================================== */

.timeline{

margin-top:20px;

border-left:3px solid var(--yellow);

padding-left:25px;

}

.timeline-item{

margin-bottom:30px;

position:relative;

}

.timeline-item::before{

content:"";

position:absolute;

left:-34px;

top:3px;

width:14px;

height:14px;

background:var(--yellow);

border-radius:50%;

}

.timeline-item h4{

margin-bottom:6px;

}

.timeline-item p{

color:var(--gray);

font-size:14px;

}

/* ======================================================
PROFILE RESPONSIVE
====================================================== */

@media(max-width:1000px){

.profile-grid{

grid-template-columns:1fr;

}

.stats-grid{

grid-template-columns:1fr;

}

.profile-header{

flex-direction:column;

align-items:flex-start;

gap:25px;

}

}/* ======================================================
DASHBOARD PREMIUM
====================================================== */

.dashboard-welcome{

display:flex;
justify-content:space-between;
align-items:center;

margin-bottom:35px;

}

.dashboard-user h1{

font-size:38px;
font-weight:800;

}

.dashboard-user p{

margin-top:8px;

color:var(--gray);

}

.dashboard-actions{

display:flex;

gap:15px;

}

.dashboard-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;

margin-bottom:35px;

}

.widget{

background:linear-gradient(180deg,#272727,#202020);

border-radius:22px;

padding:28px;

box-shadow:var(--shadow);

position:relative;

overflow:hidden;

transition:.35s;

}

.widget:hover{

transform:translateY(-8px);

}

.widget::before{

content:"";

position:absolute;

top:0;

left:0;

width:6px;

height:100%;

background:var(--yellow);

}

.widget-icon{

font-size:40px;

margin-bottom:20px;

}

.widget-title{

font-size:15px;

color:var(--gray);

margin-bottom:10px;

}

.widget-value{

font-size:42px;

font-weight:800;

}

.widget-footer{

margin-top:15px;

font-size:13px;

color:#6FCF97;

}

/* ========================================= */

.dashboard-content{

display:grid;

grid-template-columns:2fr 1fr;

gap:30px;

margin-top:20px;

}

/* ========================================= */

.chart-card{

background:var(--card);

padding:35px;

border-radius:22px;

box-shadow:var(--shadow);

min-height:420px;

}

.chart-card h2{

margin-bottom:30px;

}

/* ========================================= */

.chart-placeholder{

height:280px;

border-radius:18px;

background:linear-gradient(
45deg,
#2b2b2b,
#323232
);

display:flex;

justify-content:center;

align-items:center;

font-size:24px;

color:var(--gray);

}

/* ========================================= */

.activity-card{

background:var(--card);

padding:30px;

border-radius:22px;

box-shadow:var(--shadow);

}

.activity-card h2{

margin-bottom:25px;

}

/* ========================================= */

.activity{

display:flex;

align-items:center;

gap:15px;

padding:15px 0;

border-bottom:1px solid #333;

}

.activity:last-child{

border:none;

}

.activity-avatar{

width:50px;

height:50px;

border-radius:50%;

background:var(--yellow);

display:flex;

justify-content:center;

align-items:center;

font-weight:700;

color:var(--text-primary);

}

.activity-text h4{

font-size:15px;

margin-bottom:5px;

}

.activity-text p{

font-size:13px;

color:var(--gray);

}

/* ========================================= */

.quick-actions{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:20px;

margin-top:35px;

}

.quick-card{

background:#2B2B2B;

padding:25px;

border-radius:18px;

text-align:center;

transition:.30s;

cursor:pointer;

}

.quick-card:hover{

background:var(--yellow);

color:var(--text-primary);

transform:translateY(-5px);

}

.quick-card i{

font-size:38px;

margin-bottom:18px;

display:block;

}

.quick-card h3{

font-size:18px;

}

/* ========================================= */

.notification-dot{

position:absolute;

top:18px;

right:18px;

width:12px;

height:12px;

border-radius:50%;

background:var(--success);

box-shadow:0 0 12px var(--success);

animation:pulse 1.8s infinite;

}

@keyframes pulse{

0%{

transform:scale(.8);

opacity:.5;

}

50%{

transform:scale(1.3);

opacity:1;

}

100%{

transform:scale(.8);

opacity:.5;

}

}

/* ========================================= */

@media(max-width:1300px){

.dashboard-grid{

grid-template-columns:repeat(2,1fr);

}

.dashboard-content{

grid-template-columns:1fr;

}

}

@media(max-width:800px){

.dashboard-grid{

grid-template-columns:1fr;

}

.quick-actions{

grid-template-columns:1fr;

}

.dashboard-welcome{

flex-direction:column;

align-items:flex-start;

gap:20px;

}

}.form-step {
    display: none;
}

.form-step.active {
    display: block;
    animation: fade 0.35s ease;
}

#back-button,
#save-button {
    display: none;
}

.wizard-buttons button,
.wizard-buttons a {
    width: auto;
}

.athletes-toolbar {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 24px;
}

.athletes-toolbar .search-box {
    flex: 1;
    margin-bottom: 0;
}

.athletes-toolbar select {
    width: 220px;
}

.table-responsive {
    overflow-x: auto;
}

/* Opt-in for genuinely unpredictable-width tabular data (e.g. a
   raw CSV preview whose column count/content depends on the
   uploaded file) where a card layout can't meaningfully
   represent a row - unlike .table-responsive, this is NEVER
   hidden on mobile (see mobile.css); it stays a real table with
   horizontal scroll at every width instead of disappearing. */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.athlete-cell {
    display: flex;
    align-items: center;
    gap: 14px;
}

.athlete-avatar {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--yellow);
    color: var(--text-primary);
    font-weight: 800;
}

.athlete-cell strong,
.athlete-cell span {
    display: block;
}

.athlete-cell span {
    margin-top: 4px;
    color: var(--gray);
    font-size: 12px;
}

.player-id-badge {
    display: inline-block;
    padding: 7px 11px;
    border-radius: 999px;
    background: #343434;
    color: var(--yellow);
    font-size: 12px;
    font-weight: 800;
}

/* A button that should look like inline text/a link, not a
   button - used for compact table-row actions like "Edit" /
   "Deactivate" inside a cell instead of a full .action-button
   pill. Add .danger for a destructive one. */
.table-link {
    width: auto;
    background: none;
    padding: 0;
    border-radius: 0;
    color: var(--text-secondary);
    font-size: inherit;
    font-weight: 600;
    cursor: pointer;
}

.table-link:hover {
    color: var(--text-primary);
    text-decoration: underline;
}

.table-link.danger {
    color: var(--danger);
}

.empty-search-state {
    display: none;
    padding: 30px;
    color: var(--gray);
    text-align: center;
}

/* Canonical .empty-state - was previously split across two
   locations in this file, with a couple of properties (padding,
   h3/p color) quietly overriding each other by source order.
   Consolidated here as the single source of truth. Must stay
   ahead of .setup-empty (Programs/Teams/Venues) in source order,
   so that rule's min-height:auto override keeps winning. */
.empty-state {
    display: grid;
    place-items: center;
    min-height: 300px;
    padding: 24px;
    border-radius: 14px;
    border: 1px dashed var(--pp-border);
    background: var(--bg-elevated);
    text-align: center;
}

.empty-state h3 {
    margin-bottom: 8px;
    color: var(--pp-text);
}

.empty-state p {
    max-width: 420px;
    margin-bottom: 20px;
    color: var(--pp-muted);
}

.empty-state .empty-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: var(--radius-md);
    background: var(--brand-violet-soft);
    color: var(--brand-violet-strong);
}

.empty-state .empty-icon .icon,
.empty-state .empty-icon [data-lucide] {
    width: 26px;
    height: 26px;
}

@media (max-width: 760px) {
    .athletes-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .athletes-toolbar select {
        width: 100%;
    }
}

.profile-actions {
    display: flex;
    gap: 12px;
}

/* Permanent-delete buttons use .danger-action (see "Shared
   action-button layout" below) - same class as every other
   destructive full-size action, so it always matches its
   Deactivate/Restore siblings on the same page. */

.profile-info h2 {
    margin-bottom: 8px;
    font-size: 32px;
}

.medical-grid {
    display: grid;
    gap: 16px;
}

.medical-item {
    padding: 18px;
    border-radius: 14px;
    background: #2d2d2d;
}

.medical-item span {
    display: block;
    margin-bottom: 8px;
    color: var(--gray);
    font-size: 13px;
    font-weight: 700;
}

.medical-item p {
    line-height: 1.6;
}

.profile-quick-actions {
    display: grid;
    gap: 12px;
}

.profile-quick-actions button {
    width: 100%;
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: #2d2d2d;
    color: white;
    text-align: left;
}

.profile-quick-actions button:hover {
    background: var(--yellow);
    color: var(--text-primary);
}

@media (max-width: 700px) {
    .profile-left {
        align-items: flex-start;
        flex-direction: column;
    }

    .profile-actions {
        width: 100%;
        flex-direction: column;
    }

    .profile-actions a,
    .profile-actions button {
        text-align: center;
    }
}

.photo-upload-area {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 30px;
    padding: 22px;
    border: 1px dashed var(--border);
    border-radius: 16px;
    background: #292929;
}

.photo-preview {
    width: 120px;
    height: 120px;
    flex: 0 0 120px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 4px solid var(--yellow);
    border-radius: 50%;
    background: #202020;
}

.photo-preview span {
    font-size: 38px;
}

.photo-preview img {
    width: 100%;
    height: 100%;
    display: none;
    object-fit: cover;
}

.photo-upload-content {
    flex: 1;
}

.photo-upload-content label {
    display: block;
    margin-bottom: 10px;
    font-weight: 700;
}

.photo-upload-content small {
    display: block;
    margin-top: 9px;
    color: var(--gray);
}

@media (max-width: 650px) {
    .photo-upload-area {
        align-items: flex-start;
        flex-direction: column;
    }
}

.profile-photo{
    width:140px;
    height:140px;
    border-radius:50%;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--bg-surface);
    border:4px solid var(--yellow);
}

.profile-photo-image{
    width:100%;
    height:100%;
    object-fit:cover;
}

.athlete-avatar {
    overflow: hidden;
}

.athlete-avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recent-athletes-list {
    display: grid;
    gap: 12px;
}

.recent-athlete-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #292929;
    color: white;
    transition: 0.2s ease;
}

.recent-athlete-item:hover {
    transform: translateY(-2px);
    border-color: var(--yellow);
    background: #303030;
}

.recent-athlete-avatar {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: var(--yellow);
    color: var(--text-primary);
    font-weight: 800;
}

.recent-athlete-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recent-athlete-info {
    flex: 1;
}

.recent-athlete-info strong,
.recent-athlete-info span {
    display: block;
}

.recent-athlete-info span {
    margin-top: 4px;
    color: var(--gray);
    font-size: 12px;
}

.recent-athlete-position {
    color: var(--yellow);
    font-size: 13px;
    font-weight: 700;
}

.position-list {
    display: grid;
    gap: 20px;
}

.position-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.position-header span {
    color: var(--gray);
    font-size: 14px;
}

.position-progress {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #343434;
}

.position-progress-bar {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        var(--yellow),
        var(--yellow-hover)
    );
}

@media (max-width: 650px) {
    .recent-athlete-item {
        align-items: flex-start;
    }

    .recent-athlete-position {
        display: none;
    }
}

/* =====================================================
   DASHBOARD V2 — PARTE 1
   Estrutura geral
===================================================== */

.dashboard-v2-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.dashboard-v2-header h1 {
    margin: 4px 0 8px;
    font-size: 34px;
    line-height: 1.15;
}

.dashboard-v2-header p {
    color: var(--gray);
}

.dashboard-v2-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}

/* Lightened in Lote 2a closeout - was a gradient card with a
   heavy drop shadow and hover-lift; now the same hairline
   surface language as .setup-module / .setup-overview-item. */
.overview-card {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 0;
    padding: 16px 18px;
    border: 1px solid var(--pp-border-soft);
    border-radius: 12px;
    background: var(--pp-surface);
    transition: border-color 0.15s ease;
}

.overview-card:hover {
    border-color: rgba(124, 92, 252, 0.4);
}

.overview-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(124, 92, 252, 0.16);
    color: var(--yellow);
    font-size: 17px;
    font-weight: 800;
}

.overview-icon.success {
    background: rgba(40, 199, 111, 0.15);
    color: var(--success);
}

.overview-icon.danger {
    background: rgba(234, 84, 85, 0.14);
    color: var(--danger);
}

.overview-icon.category {
    background: rgba(47, 91, 234, 0.16);
    color: #7294ff;
}

.overview-card > div:last-child {
    min-width: 0;
}

.overview-card span,
.overview-card strong,
.overview-card small {
    display: block;
}

.overview-card span {
    margin-bottom: 4px;
    color: var(--gray);
    font-size: 12px;
    font-weight: 600;
}

.overview-card strong {
    margin-bottom: 3px;
    color: var(--text-primary);
    font-size: 22px;
    line-height: 1;
}

.overview-card small {
    color: var(--gray2);
    font-size: 11.5px;
}

.dashboard-v2-main-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.65fr)
        minmax(320px, 0.85fr);
    gap: 22px;
    margin-bottom: 22px;
}

.dashboard-v2-bottom-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

/* Lightened in Lote 2a closeout - hairline border, no shadow,
   matching .setup-module/.pp-panel. */
.dashboard-v2-panel {
    min-width: 0;
    padding: 20px 22px;
    border: 1px solid var(--pp-border-soft);
    border-radius: 14px;
    background: var(--pp-surface);
    container-type: inline-size;
}

.dashboard-v2-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

.dashboard-v2-panel-header h2 {
    margin-bottom: 6px;
    font-size: 20px;
}

.dashboard-v2-panel-header p {
    color: var(--gray);
    font-size: 13px;
    line-height: 1.5;
}

.dashboard-v2-panel-header a {
    flex: 0 0 auto;
    color: var(--yellow);
    font-size: 13px;
    font-weight: 700;
}

.dashboard-empty-state {
    display: grid;
    place-items: center;
    min-height: 260px;
    padding: 28px;
    text-align: center;
}

.dashboard-empty-state > div:first-child {
    margin-bottom: 12px;
    font-size: 42px;
}

.dashboard-empty-state h3 {
    margin-bottom: 8px;
}

.dashboard-empty-state p {
    max-width: 360px;
    margin-bottom: 18px;
    color: var(--gray);
    line-height: 1.6;
}

.dashboard-empty-state.compact {
    min-height: 220px;
}

@media (max-width: 1200px) {
    .dashboard-v2-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-v2-main-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .dashboard-v2-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-v2-bottom-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .dashboard-v2-stats {
        grid-template-columns: 1fr;
    }

    .dashboard-v2-header h1 {
        font-size: 28px;
    }

    .dashboard-v2-panel {
        padding: 18px;
    }
}

/* =====================================================
   DASHBOARD V2 — PARTE 2
   Atletas recentes e posições
===================================================== */

.dashboard-athlete-list {
    display: grid;
    gap: 0;
}

/* Lightened in Lote 2a closeout - was an individually filled
   "card per row" (#292929 box + hover-lift); now a hairline
   divider row matching .setup-row/.pp-list-row, so a list of
   these inside a .dashboard-v2-panel doesn't read as boxes
   nested inside a box. */
.dashboard-athlete-row {
    display: grid;
    grid-template-columns:
        44px
        minmax(0, 1fr)
        minmax(140px, 0.8fr)
        auto;
    align-items: center;
    gap: 14px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--pp-border-soft);
    color: var(--text-primary);
    transition: background 0.15s ease;
}

.dashboard-athlete-list .dashboard-athlete-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.dashboard-athlete-list .dashboard-athlete-row:first-child {
    padding-top: 0;
}

.dashboard-athlete-row:hover {
    background: var(--pp-surface-2);
}

.dashboard-athlete-avatar {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: var(--brand-violet-soft);
    color: var(--brand-violet-strong);
    font-size: 15px;
    font-weight: 800;
}

.dashboard-athlete-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dashboard-athlete-name,
.dashboard-athlete-category {
    min-width: 0;
}

.dashboard-athlete-name strong,
.dashboard-athlete-name span,
.dashboard-athlete-category span,
.dashboard-athlete-category small {
    display: block;
}

.dashboard-athlete-name strong {
    overflow: hidden;
    margin-bottom: 5px;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
}

.dashboard-athlete-name span {
    color: var(--gray2);
    font-size: 12px;
}

.dashboard-athlete-category span {
    overflow: hidden;
    margin-bottom: 5px;
    color: var(--gray);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 700;
}

.dashboard-athlete-category small {
    overflow: hidden;
    color: var(--gray2);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}

.dashboard-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    padding: 7px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.dashboard-status.active {
    background: rgba(40, 199, 111, 0.14);
    color: #64dc98;
}

.dashboard-status.inactive {
    background: rgba(234, 84, 85, 0.14);
    color: var(--danger);
}

/* Informational state - e.g. "Scheduled"/"Draft in progress":
   planned but not yet completed, so neither success green nor
   danger red applies. */
.dashboard-status.info {
    background: var(--pp-accent-soft);
    color: var(--brand-violet);
}

/* Neutral/muted state - e.g. a past event whose saved status
   is still "Scheduled": that is not an error or a deactivated
   record, so it should not read as red/danger. Presentation
   only - never changes the underlying status value. */
.dashboard-status.muted {
    background: var(--pp-surface-3);
    color: var(--text-muted);
}

.dashboard-position-list {
    display: grid;
    gap: 20px;
}

.dashboard-position-item {
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #292929;
}

.dashboard-position-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
}

.dashboard-position-info span {
    color: var(--gray);
    font-size: 13px;
    font-weight: 700;
}

.dashboard-position-info strong {
    color: white;
    font-size: 16px;
}

.dashboard-position-track {
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: #3a3a3a;
}

.dashboard-position-fill {
    height: 100%;
    min-width: 8px;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        var(--yellow),
        var(--yellow-hover)
    );
    box-shadow: 0 0 14px rgba(124, 92, 252, 0.25);
    transition: width 0.6s ease;
}

@media (max-width: 760px) {
    .dashboard-athlete-row {
        grid-template-columns:
            48px
            minmax(0, 1fr)
            auto;
    }

    .dashboard-athlete-category {
        display: none;
    }

    .dashboard-athlete-avatar {
        width: 48px;
        height: 48px;
    }
}

@media (max-width: 500px) {
    .dashboard-athlete-row {
        grid-template-columns:
            44px
            minmax(0, 1fr);
    }

    .dashboard-status {
        display: none;
    }

    .dashboard-athlete-avatar {
        width: 44px;
        height: 44px;
    }
}

/* .dashboard-athlete-row is reused inside narrower side-column
   panels (e.g. Recent Coaches, ~350px wide at 1201-1600px
   viewports) where its 44px + 140px-min category column + auto
   status badge leave the name track no room, collapsing it to
   0 width. A container query (not a viewport media query) is
   needed here because the squeeze comes from the panel's own
   grid column, not the viewport size. */
@container (max-width: 460px) {
    .dashboard-athlete-category {
        display: none;
    }

    .dashboard-athlete-row {
        grid-template-columns:
            44px
            minmax(0, 1fr)
            auto;
    }
}

/* =====================================================
   DASHBOARD ALERT
   Lightweight callout for time-sensitive items (e.g.
   pending registrations) — "what needs attention today".
===================================================== */

.dashboard-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    margin-bottom: 24px;
    border-radius: 16px;
    background: var(--warning-soft);
    border: 1px solid rgba(245, 185, 66, 0.35);
}

.dashboard-alert-text {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.dashboard-alert-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(245, 185, 66, 0.18);
    color: var(--warning);
    font-size: 18px;
}

.dashboard-alert strong {
    display: block;
    color: var(--text-primary);
    font-size: 14.5px;
}

.dashboard-alert span {
    color: var(--gray2);
    font-size: 13px;
}

.dashboard-alert .primary-action,
.dashboard-alert .secondary-action {
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .dashboard-alert {
        flex-direction: column;
        align-items: stretch;
    }
}

/* =====================================================
   ACADEMY SETUP (Programs / Teams / Venues)
   Compact "product settings" list pattern - Linear/Stripe/
   Vercel style. One hairline-bordered module per entity,
   rows separated by dividers (not nested cards), a kebab
   menu for secondary actions, and a slide-in drawer for
   creation instead of a permanently-open form.
===================================================== */

.setup-page {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* ---------- Compact page-header actions (this page only) ---------- */

.setup-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.setup-header-actions a,
.setup-header-actions button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid var(--pp-border-soft);
    background: transparent;
    color: var(--gray2);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.setup-header-actions a:hover,
.setup-header-actions button:hover {
    color: var(--text-primary);
    border-color: var(--pp-border);
    background: var(--pp-surface-2);
}

.setup-header-actions a .icon,
.setup-header-actions button .icon {
    width: 14px;
    height: 14px;
}

/* ---------- Overview strip ---------- */

.setup-overview {
    display: flex;
    align-items: stretch;
    background: var(--pp-surface);
    border: 1px solid var(--pp-border-soft);
    border-radius: 12px;
    overflow: hidden;
}

.setup-overview-item {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 0;
    padding: 13px 20px;
}

.setup-overview-item + .setup-overview-item {
    border-left: 1px solid var(--pp-border-soft);
}

.setup-overview-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--pp-accent-soft);
    color: var(--brand-violet);
}

.setup-overview-icon.teams {
    background: rgba(47, 91, 234, 0.16);
    color: #7294ff;
}

.setup-overview-icon.venues {
    background: var(--pp-surface-3);
    color: var(--gray2);
}

.setup-overview-icon .icon {
    width: 15px;
    height: 15px;
}

.setup-overview-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.setup-overview-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gray2);
}

.setup-overview-value {
    font-size: 19px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.1;
}

/* ---------- Module (Programs / Teams / Venues) ---------- */

.setup-module {
    border: 1px solid var(--pp-border-soft);
    border-radius: 14px;
    background: var(--pp-surface);
    overflow: hidden;
}

.setup-module-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--pp-border-soft);
}

.setup-module-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.setup-module-title h2 {
    margin: 0;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.setup-module-count {
    font-size: 12px;
    font-weight: 700;
    color: var(--gray2);
}

.setup-module-header .table-link {
    flex: 0 0 auto;
    font-size: 12px;
    white-space: nowrap;
}

.setup-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    flex: 0 0 auto;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid var(--pp-border-soft);
    background: var(--pp-surface-2);
    color: var(--text-primary);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.setup-add-btn .icon {
    width: 14px;
    height: 14px;
}

.setup-add-btn:hover {
    border-color: var(--brand-violet);
    background: var(--pp-accent-soft);
    color: var(--brand-violet);
}

/* ---------- Rows ---------- */

.setup-list {
    display: flex;
    flex-direction: column;
}

.setup-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 18px;
    border-bottom: 1px solid var(--pp-border-soft);
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.setup-row:last-child {
    border-bottom: none;
}

.setup-row:hover {
    background: var(--pp-surface-3);
    box-shadow: inset 3px 0 0 var(--pp-border);
}

.setup-row-accent {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: var(--brand-violet);
}

.setup-row-accent.teams {
    background: #7294ff;
}

.setup-row-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: var(--pp-surface-3);
    color: var(--gray2);
}

/* Compact month/day date box - Calendar event rows. */
.setup-row-datebox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 10px;
    background: var(--pp-surface-3);
    color: var(--text-secondary);
}

.setup-row-datebox .datebox-month {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.setup-row-datebox .datebox-day {
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    color: var(--text-primary);
}

.setup-row-icon .icon {
    width: 12px;
    height: 12px;
}

.setup-row-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Pairs an avatar with .setup-row-main as one flex item, so a
   row with a photo/initials avatar (Athletes, Coaches) wraps
   as a unit on narrow screens instead of the avatar floating
   alone - see the mobile media query below. */
.setup-row-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

/* Match lineup card (matches/detail.html): identity stacked
   above its stat fields rather than sharing one flex row like
   .setup-row does, since a 5-field form-grid and an identity
   block both want real width - forcing them side by side
   starves the identity block down to near-zero (min-width:0
   on a flex:1 sibling loses badly to a wide, non-shrinking
   form-grid). Reuses .setup-row-identity for the avatar+name
   row itself, just not nested inside .setup-row. */
.lineup-row {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--pp-border-soft);
}

.lineup-row:last-child {
    border-bottom: none;
}

.lineup-fields {
    width: 100%;
}

.setup-row-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.setup-row-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.setup-row-count {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--pp-surface-3);
    color: var(--gray2);
    font-size: 11px;
    font-weight: 700;
    flex: 0 0 auto;
}

.setup-row-count .icon {
    width: 11px;
    height: 11px;
}

.setup-row-meta {
    font-size: 12px;
    color: var(--gray2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.setup-row-side {
    flex: 0 0 auto;
}

.setup-row-side a {
    font-size: 12px;
    font-weight: 700;
    color: var(--brand-violet);
    white-space: nowrap;
}

.setup-row-side a:hover {
    text-decoration: underline;
}

/* ---------- Kebab menu ---------- */

.row-menu {
    position: relative;
    flex: 0 0 auto;
}

.row-menu summary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    color: var(--gray2);
    font-size: 16px;
    font-weight: 900;
    letter-spacing: -1px;
    list-style: none;
    cursor: pointer;
}

.row-menu summary::-webkit-details-marker {
    display: none;
}

.row-menu summary:hover,
.row-menu[open] summary {
    background: var(--pp-surface-3);
    color: var(--text-primary);
}

.row-menu-panel {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 30;
    min-width: 168px;
    padding: 5px;
    border-radius: 10px;
    background: var(--pp-surface-3);
    border: 1px solid var(--pp-border-soft);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.row-menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 10px;
    border-radius: 6px;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.row-menu-item:hover {
    background: var(--pp-surface-2);
    color: var(--text-primary);
}

.row-menu-item.danger:hover {
    color: var(--danger);
}

/* ---------- Empty state ---------- */

.setup-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 22px 18px;
    color: var(--gray2);
    font-size: 13px;
}

.setup-empty .icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

/* ---------- Create drawer ---------- */

.setup-drawer {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
}

.setup-drawer.is-open {
    display: block;
}

.setup-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 8, 12, 0.6);
    opacity: 0;
    transition: opacity 0.18s ease;
}

.setup-drawer.is-open .setup-drawer-backdrop {
    opacity: 1;
}

.setup-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: min(420px, 100vw);
    background: var(--pp-surface);
    border-left: 1px solid var(--pp-border-soft);
    box-shadow: -30px 0 60px rgba(0, 0, 0, 0.5);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    transform: translateX(100%);
    transition: transform 0.22s ease;
}

.setup-drawer.is-open .setup-drawer-panel {
    transform: translateX(0);
}

.setup-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.setup-drawer-header h3 {
    margin: 0;
    font-size: 17px;
    color: var(--text-primary);
}

.setup-drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 8px;
    border: 1px solid var(--pp-border-soft);
    background: transparent;
    color: var(--gray2);
    cursor: pointer;
}

.setup-drawer-close:hover {
    color: var(--text-primary);
    background: var(--pp-surface-2);
}

.setup-drawer-close .icon {
    width: 16px;
    height: 16px;
}

.setup-drawer-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.setup-drawer-form .form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.setup-drawer-form label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--gray2);
}

.setup-drawer-form input,
.setup-drawer-form select {
    width: 100%;
}

.setup-drawer-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
}

.setup-drawer-actions .primary-action {
    width: auto;
    flex: 0 0 auto;
}

.setup-drawer-cancel {
    width: auto;
    flex: 0 0 auto;
    padding: 10px 14px;
    border-radius: 9px;
    border: 1px solid var(--pp-border-soft);
    background: transparent;
    color: var(--gray2);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
}

.setup-drawer-cancel:hover {
    color: var(--text-primary);
    border-color: var(--pp-border);
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
    .setup-row-meta {
        white-space: normal;
    }
}

@media (max-width: 768px) {
    .setup-overview {
        flex-direction: column;
    }

    .setup-overview-item + .setup-overview-item {
        border-left: none;
        border-top: 1px solid var(--pp-border-soft);
    }
}

@media (max-width: 640px) {
    .setup-header-actions {
        width: 100%;
    }

    .setup-header-actions a {
        flex: 1 1 auto;
        justify-content: center;
    }

    .setup-add-btn {
        min-height: 44px;
        padding: 9px 14px;
    }

    .setup-row {
        flex-wrap: wrap;
        row-gap: 6px;
        padding: 14px 16px;
    }

    .setup-row-main {
        flex: 1 1 100%;
        order: 0;
    }

    /* Rows that pair an avatar with .setup-row-main (Athletes,
       Coaches) wrap both together via .setup-row-identity, so
       the avatar never ends up orphaned on its own line. */
    .setup-row-identity {
        flex: 1 1 100%;
        order: 0;
    }

    .setup-row-side {
        order: 1;
    }

    .row-menu {
        order: 2;
        margin-left: auto;
    }

    .setup-row .dashboard-status {
        display: inline-flex;
    }

    .setup-row-name {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .setup-row-meta {
        white-space: normal;
    }

    .row-menu summary {
        width: 44px;
        height: 44px;
    }

    .setup-drawer-panel {
        width: 100vw;
        padding: 18px;
    }
}

/* =====================================================
   SIDEBAR PREMIUM
===================================================== */

.sidebar-premium {
    display: flex;
    flex-direction: column;
    width: 288px;
    min-height: 100vh;
    padding: 26px 20px 22px;
    background:
        linear-gradient(
            180deg,
            var(--bg-primary) 0%,
            #0e0e0e 100%
        );
}

.sidebar-platform {
    border-right: 3px solid var(--yellow);
    background:
        linear-gradient(
            180deg,
            #16130a 0%,
            #0e0e0e 100%
        );
}

.platform-mode-badge {
    width: fit-content;
    margin: 0 8px 26px;
    padding: 5px 12px;
    background: rgba(124, 92, 252, 0.14);
    color: var(--yellow);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    border-radius: 999px;
    border: 1px solid rgba(124, 92, 252, 0.35);
}

.sidebar-brand {
    gap: 14px;
    margin-bottom: 30px;
    padding: 0 8px;
}

.sidebar-logo {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    object-fit: contain;
}

.sidebar-brand-text {
    min-width: 0;
}

.sidebar-brand-text h2 {
    margin-bottom: 2px;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.sidebar-brand-text p {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 11.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-section-label {
    margin: 0 12px 12px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.sidebar-secondary-label {
    margin-top: 28px;
}

.sidebar-menu {
    gap: 3px;
}

.menu-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 44px;
    padding: 11px 14px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    transition: var(--transition-fast);
}

.menu-item:hover {
    border-color: var(--border-default);
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.menu-item.active {
    position: relative;
    border-color: transparent;
    background: var(--brand-violet-soft);
    color: var(--text-primary);
}

.menu-item.active::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 999px;
    background: var(--brand-gradient);
}

.menu-item.active .menu-icon [data-lucide] {
    color: var(--brand-cyan);
}

.menu-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    flex: 0 0 22px;
    color: currentColor;
}

.menu-label {
    flex: 1;
}

.menu-badge {
    padding: 4px 7px;
    border-radius: 999px;
    background: var(--bg-elevated);
    color: #8b8b8b;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.menu-item.active .menu-badge {
    background: rgba(0, 0, 0, 0.13);
    color: var(--text-primary);
}

.menu-badge-unread {
    background: var(--brand-gradient);
    color: #070A12;
    font-size: 10.5px;
    min-width: 18px;
    text-align: center;
}

.menu-item-disabled {
    cursor: default;
    opacity: 0.72;
}

.sidebar-footer {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--border-default);
}

.sidebar-user-card {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid var(--border-default);
    border-radius: 14px;
    background: var(--bg-primary);
}

.sidebar-user-avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: var(--brand-gradient);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

.sidebar-user-info {
    min-width: 0;
}

.sidebar-user-info strong,
.sidebar-user-info span {
    display: block;
}

.sidebar-user-info strong {
    overflow: hidden;
    margin-bottom: 3px;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: white;
    font-size: 13px;
}

.sidebar-user-info span {
    color: var(--gray2);
    font-size: 11px;
}

.logout-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px;
    border-radius: 12px;
    background: #221919;
    color: var(--danger);
    font-size: 13px;
    font-weight: 750;
    transition: 0.2s ease;
}

.logout-button:hover {
    transform: translateY(-1px);
    background: #312020;
    color: #ffaaaa;
}

/* ======================================================
MOBILE NAVIGATION
====================================================== */

.mobile-topbar {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-default);
    position: sticky;
    top: 0;
    z-index: 40;
}

.mobile-topbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.mobile-topbar-brand img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
}

.mobile-topbar-brand span {
    font-weight: 800;
    font-size: 15px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-topbar-brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.mobile-topbar-brand-text strong {
    font-weight: 800;
    font-size: 14px;
    line-height: 1.2;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-topbar-brand-text span {
    font-weight: 600;
    font-size: 10px;
    line-height: 1.2;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    color: var(--text-primary);
    transition: var(--transition-fast);
}

.mobile-nav-toggle:hover {
    border-color: var(--brand-violet);
}

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(3, 5, 10, 0.65);
    z-index: 49;
}

@media (max-width: 900px) {
    .mobile-topbar {
        display: flex;
    }

    .sidebar-premium {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 50;
        height: 100vh;
        max-width: 86vw;
        transform: translateX(-100%);
        transition: transform var(--transition-default);
        box-shadow: var(--shadow-lg);
    }

    .sidebar-premium.is-open {
        transform: translateX(0);
    }

    .sidebar-backdrop.is-open {
        display: block;
    }

    .dashboard-main {
        padding: 20px 16px;
    }
}

.profile-quick-action-link {
    display: block;
    width: 100%;
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: #2d2d2d;
    color: white;
    text-align: left;
    transition: 0.2s ease;
}

.profile-quick-action-link:hover {
    background: var(--yellow);
    color: var(--text-primary);
}

/* ==========================================
   EXERCISE LIBRARY
========================================== */

/* Rebuilt in Lote 2b - this card was a leftover from an old
   light-theme mock (white background, near-black text) that was
   never migrated to the dark-premium redesign, so it rendered as
   a glaring white box inside an otherwise dark app shell. Now a
   hairline panel consistent with .pp-panel/.setup-row. */
.exercise-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
    gap:14px;
    margin-top:18px;
}

.exercise-card{
    background:var(--pp-surface);
    border:1px solid var(--pp-border-soft);
    border-radius:12px;
    padding:16px;
    text-decoration:none;
    color:var(--text-primary);
    box-shadow:none;
    transition:border-color .15s ease, background .15s ease;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.exercise-card:hover{
    transform:none;
    border-color:var(--pp-border);
    background:var(--pp-surface-2);
    box-shadow:none;
}

.exercise-card h3 {
    margin: 0;
    font-size: 15px;
    color: var(--text-primary);
}

.exercise-card > p {
    margin: -6px 0 0;
    color: var(--text-muted);
    font-size: 12.5px;
}

.exercise-card-icon{
    width:36px;
    height:36px;
    border-radius:9px;
    background:var(--pp-accent-soft);
    color:var(--brand-violet);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
}

.exercise-card-icon .icon {
    width: 16px;
    height: 16px;
}

.exercise-meta{
    display:flex;
    flex-wrap: wrap;
    gap: 14px;
    color:var(--text-muted);
    font-size:12px;
}

.exercise-meta .icon {
    width: 12px;
    height: 12px;
}

.exercise-footer{
    margin-top:auto;
    padding-top: 10px;
    border-top: 1px solid var(--pp-border-soft);
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size: 12px;
    color: var(--text-muted);
}

.exercise-footer strong {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--brand-violet);
    font-weight: 700;
}

/* ==========================================
   TACTICAL BOARD PLACEHOLDER
========================================== */

.exercise-board-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

.tactical-board-placeholder{
    display:grid;
    grid-template-columns:380px 1fr;
    gap:35px;
    align-items:center;
}

.tactical-board-preview{

    position:relative;

    width:380px;
    height:520px;

    background:#2b9a47;

    border-radius:18px;

    border:5px solid #ffffff;

    overflow:hidden;

}

/* Lines */

.centre-line{
    position:absolute;
    top:50%;
    left:0;
    width:100%;
    height:2px;
    background:white;
}

.pitch-circle{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:120px;
    height:120px;
    border:2px solid white;
    border-radius:50%;
}

.pitch-goal{
    position:absolute;
    width:80px;
    height:22px;
    border:2px solid white;
    left:50%;
    transform:translateX(-50%);
}

.pitch-goal-left{
    top:0;
}

.pitch-goal-right{
    bottom:0;
}

/* Players */

.board-player{

    position:absolute;

    width:22px;
    height:22px;

    border-radius:50%;

}

.board-player-red{
    background:#ff4d4f;
}

.board-player-blue{
    background:#3498db;
}

.player-one{
    top:90px;
    left:110px;
}

.player-two{
    top:140px;
    right:110px;
}

.player-three{
    bottom:120px;
    left:120px;
}

.player-four{
    bottom:170px;
    right:120px;
}

.board-ball{

    position:absolute;

    font-size:24px;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

}

.tactical-board-placeholder-content h3{
    margin-bottom:12px;
}

.tactical-board-placeholder-content p{
    color:#666;
    line-height:1.7;
    margin-bottom:25px;
}

@media(max-width:1000px){

    .tactical-board-placeholder{

        grid-template-columns:1fr;

    }

    .tactical-board-preview{

        width:100%;

        max-width:420px;

        margin:auto;

    }

}

/* ==========================================
   TACTICAL BOARD - REAL EDITOR
========================================== */

.board-container {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    width: 100%;
}

.board-tools {
    width: 220px;
    min-width: 220px;

    background: var(--pp-surface);
    border: 1px solid var(--pp-border-soft);
    border-radius: 14px;

    padding: 16px;

    display: flex;
    flex-direction: column;
    gap: 8px;
}

.board-tools h3 {
    margin: 8px 0 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.board-tools .primary-action,
.board-tools .secondary-action {
    width: 100%;
    min-height: 44px;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    padding: 10px 14px;

    border-radius: 10px;
}

.board-tools-divider {
    height: 1px;
    background: var(--pp-border-soft);
    margin: 8px 0;
}

.board-stage {
    flex: 1;

    min-width: 0;

    background: var(--pp-surface);
    border: 1px solid var(--pp-border-soft);
    border-radius: 14px;

    padding: 18px;

    overflow: auto;
}

#tacticalStage {
    width: 1000px;
    height: 650px;

    margin: 0 auto;

    overflow: hidden;

    border-radius: 10px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.35);
}

.board-save-status {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

/* Responsive */

@media (max-width: 1100px) {

    .board-container {
        flex-direction: column;
    }

    .board-tools {
        width: 100%;
        min-width: 0;

        display: grid;
        grid-template-columns:
            repeat(auto-fit, minmax(110px, 1fr));
    }

    .board-tools h3,
    .board-tools-divider,
    .board-save-status {
        grid-column: 1 / -1;
    }

    .board-stage {
        width: 100%;
    }
}

/* ==========================================
   SESSION PLAN PROFILE
========================================== */

.session-profile-header {
    align-items: flex-start;
}

.session-header-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 12px;

    color: #8f8f8f;
    font-size: 14px;
}

.session-header-meta > span:not(.session-status) {
    padding-right: 10px;
    border-right: 1px solid #363636;
}

.session-status {
    display: inline-flex;
    align-items: center;

    padding: 5px 10px;

    border-radius: 999px;

    font-size: 12px;
    font-weight: 700;
}

.session-status-draft {
    background: rgba(124, 92, 252, .12);
    color: var(--brand-violet);
}

.session-status-scheduled {
    background: rgba(52, 152, 219, .12);
    color: #3498db;
}

.session-status-completed {
    background: rgba(46, 204, 113, .12);
    color: #2ecc71;
}

.session-status-cancelled {
    background: rgba(231, 76, 60, .12);
    color: #e74c3c;
}


/* SUMMARY */

.session-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;

    margin-bottom: 24px;
}

.session-summary-card {
    background: var(--pp-surface);

    border: 1px solid #303030;
    border-radius: 14px;

    padding: 20px;

    display: flex;
    flex-direction: column;
    gap: 8px;
}

.session-summary-card > span {
    color: var(--pp-muted);
    font-size: 13px;
}

.session-summary-card > strong {
    font-size: 28px;
    line-height: 1;
    color: var(--pp-text);
}

.session-summary-card .session-summary-text {
    font-size: 18px;
    line-height: 1.35;
}

.session-summary-card small {
    color: var(--pp-muted-2);
}


/* TEXT BLOCK */

.session-text-block {
    margin-top: 16px;

    padding: 18px;

    background: var(--bg-surface);
    border: 1px solid #303030;
    border-radius: 12px;

    color: #d5d5d5;
    line-height: 1.7;

    white-space: pre-line;
}


/* DRILLS */

/* Compact hairline-divided drill rows (Lote 2b) - replaces the
   previous individually-boxed #1d1d1d card-per-drill look so a
   list of drills reads like a scannable list, not a stack of
   separate cards. Sortable.js still targets .session-drill-card
   directly, so the class name/data attributes are unchanged -
   only the visual density changed. */
.session-drill-list {
    display: flex;
    flex-direction: column;

    margin-top: 16px;
}

.session-drill-card {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 96px;
    align-items: start;
    gap: 14px;

    padding: 14px 4px;

    background: transparent;
    border: none;
    border-bottom: 1px solid var(--pp-border-soft);
    border-radius: 0;

    transition: background .15s ease;
}

.session-drill-list .session-drill-card:last-child {
    border-bottom: none;
}

.session-drill-card:hover {
    transform: none;
    border-color: transparent;
    border-bottom: 1px solid var(--pp-border-soft);
    background: var(--pp-surface-2);
}

.session-drill-order {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;

    padding-top: 2px;

    background: transparent;
}

.session-order-number {
    font-size: 13px;
    font-weight: 800;

    color: var(--brand-violet);
}

.session-drill-content {
    padding: 0;
    min-width: 0;
}

.session-drill-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.session-drill-category {
    display: inline-flex;

    margin-bottom: 5px;

    padding: 3px 8px;

    background: rgba(124, 92, 252, .1);

    border-radius: 999px;

    color: var(--brand-violet);
    font-size: 10px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .5px;
}

.session-drill-top h3 {
    margin: 0;

    font-size: 15px;
}

.session-drill-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 8px;

    color: var(--text-muted);
    font-size: 11.5px;
}

.session-drill-description {
    margin-top: 8px;

    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.55;
}

.session-drill-notes {
    margin-top: 8px;

    padding: 8px 10px;

    background: var(--pp-surface-2);
    border-left: 2px solid var(--brand-violet);
    border-radius: 6px;

    color: var(--text-secondary);
    font-size: 12.5px;
}

.session-drill-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 10px;
}

.session-drill-actions form {
    margin: 0;
}


/* TOTAL */

.session-total {
    margin-top: 16px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 14px 16px;

    background: var(--pp-surface-2);

    border: 1px solid var(--pp-border-soft);
    border-radius: 10px;
}

.session-total div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.session-total span {
    font-weight: 700;
}

.session-total small {
    color: #777;
}

.session-total strong {
    font-size: 22px;
    color: var(--brand-violet);
}


/* BOTTOM */

.session-bottom-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}


/* RESPONSIVE */

@media (max-width: 1100px) {

    .session-summary-grid,
    .session-info-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 700px) {

    .session-summary-grid,
    .session-bottom-grid {
        grid-template-columns: 1fr;
    }

    .session-drill-card {
        grid-template-columns: 24px minmax(0, 1fr);
    }

    .session-drill-preview {
        grid-column: 2 / -1;
        margin-top: 10px;
        border-left: 0;
        padding-left: 0;
        border-top: 1px solid var(--pp-border-soft);
        padding-top: 10px;
        width: auto;
    }

    .session-preview-link,
    .session-preview-image,
    .session-preview-empty {
        min-height: 64px;
    }

    .session-drill-top {
        flex-direction: column;
    }

}

/* ==========================================
   SESSION GRID
========================================== */

.session-list-section {
    margin-top: 10px;
}

.session-plan-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fill, minmax(320px, 1fr));

    gap: 20px;

    margin-top: 22px;
}


/* ==========================================
   SESSION CARD
========================================== */

.session-plan-card {
    background: #1f1f1f;

    border: 1px solid #303030;
    border-radius: 16px;

    padding: 20px;

    display: flex;
    flex-direction: column;

    gap: 18px;

    transition:
        transform .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;
}

.session-plan-card:hover {
    transform: translateY(-3px);

    border-color: #444;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, .18);
}


.session-plan-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 16px;
}

.session-plan-code {
    display: inline-block;

    margin-bottom: 6px;

    color: #777;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .8px;
}

.session-plan-card-top h3 {
    margin: 0;

    font-size: 19px;
    line-height: 1.35;
}


/* ==========================================
   META
========================================== */

.session-plan-card-meta {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;
}

.session-plan-card-meta > div {
    padding: 12px;

    background: #191919;

    border: 1px solid #2c2c2c;
    border-radius: 10px;

    display: flex;
    flex-direction: column;

    gap: 5px;
}

.session-plan-card-meta span {
    color: #777;

    font-size: 11px;
}

.session-plan-card-meta strong {
    font-size: 13px;
}


/* ==========================================
   FOOTER
========================================== */

.session-plan-card-footer {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: auto;
}

.session-plan-card-footer .primary-action {
    flex: 1;

    justify-content: center;
}


/* ==========================================
   STATUS
========================================== */

.session-status {
    padding: 5px 9px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 700;

    white-space: nowrap;
}

.session-status-draft {
    background: rgba(124, 92, 252, .12);
    color: var(--brand-violet);
}

.session-status-scheduled {
    background: rgba(52, 152, 219, .12);
    color: #3498db;
}

.session-status-completed {
    background: rgba(46, 204, 113, .12);
    color: #2ecc71;
}

.session-status-cancelled {
    background: rgba(231, 76, 60, .12);
    color: #e74c3c;
}


/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 650px) {

    .session-plan-grid {
        grid-template-columns: 1fr;
    }

}


/* ==========================================
   EASIER SESSION DRAG & DROP
========================================== */

.session-drill-card {
    cursor: grab;
}

.session-drill-card:active {
    cursor: grabbing;
}

.session-drill-actions,
.session-drill-actions a,
.session-drill-actions button,
.session-drill-actions form {
    cursor: pointer;
}

.session-drag-handle {
    pointer-events: none;

    color: #777;
    font-size: 20px;

    user-select: none;
}

.session-drill-card:hover .session-drag-handle {
    color: var(--brand-violet);
}

.session-drill-ghost {
    opacity: .3;
}

.session-drill-chosen {
    border-color: var(--brand-violet) !important;

    box-shadow:
        0 12px 32px rgba(0, 0, 0, .32);
}

.session-drill-dragging {
    cursor: grabbing;

    transform: rotate(.5deg);
}

/* ==========================================
   INLINE DRILL DURATION
========================================== */

.session-drill-inline-form {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    margin: 0;
}

.session-drill-inline-form label {
    color: #777;
    font-size: 12px;
    font-weight: 600;
}

.session-duration-editor {
    display: flex;
    align-items: center;
    gap: 8px;

    height: 44px;
    padding: 0 8px 0 12px;

    background: #282828;
    border: 1px solid #3a3a3a;
    border-radius: 12px;

    box-sizing: border-box;
}

.session-duration-editor input {
    width: 42px;
    height: 32px;

    padding: 0;

    border: none;
    outline: none;

    background: transparent;

    color: var(--brand-violet);

    font-size: 16px;
    font-weight: 700;
    text-align: center;

    box-sizing: border-box;
}

/* Remove setinhas do number */
.session-duration-editor input::-webkit-outer-spin-button,
.session-duration-editor input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.session-duration-editor input[type="number"] {
    -moz-appearance: textfield;
}

.session-duration-editor span {
    color: #999;
    font-size: 13px;
}

.session-save-small {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    min-width: 40px;
    min-height: 40px;

    padding: 0;
    margin: 0;

    border: none;
    border-radius: 9px;

    background: var(--brand-violet);
    color: var(--text-primary);

    font-size: 16px;
    font-weight: 800;
    line-height: 1;

    cursor: pointer;

    box-sizing: border-box;
}

.session-save-small:hover {
    background: #ffd65a;
}

/* ==========================================
   TACTICAL BOARD PREVIEW THUMBNAIL
   Shrunk in Lote 2b from a 360x220px block to a small 96px
   thumbnail so a drill row stays compact and scannable - the
   full diagram is still one click away via the Tactical Board.
========================================== */

.session-drill-preview {
    width: 96px;
    min-height: 72px;

    display: flex;
    align-items: stretch;

    border-left: 1px solid var(--pp-border-soft);

    padding-left: 14px;
}


.session-preview-link {
    position: relative;

    display: flex;

    width: 100%;
    min-height: 72px;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius: 8px;

    background: var(--pp-surface-3);

    border: 1px solid var(--pp-border-soft);

    text-decoration: none;

    cursor: pointer;

    transition: border-color .15s ease;
}


.session-preview-link:hover {
    border-color: var(--brand-violet);
}


/* SAVED IMAGE */

.session-preview-image {
    display: block;

    width: 100%;
    height: 100%;

    min-height: 72px;

    object-fit: contain;
    object-position: center;

    background: var(--pp-surface-3);
}


/* HOVER OVERLAY */

.session-preview-overlay {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    display: flex;

    justify-content: center;
    align-items: center;

    padding: 4px;

    background: rgba(0, 0, 0, .7);

    color: var(--brand-violet);

    opacity: 0;

    transition: opacity .15s ease;
}

.session-preview-overlay .icon {
    width: 14px;
    height: 14px;
}


.session-preview-link:hover
.session-preview-overlay {

    opacity: 1;
}


/* ==========================================
   NO DIAGRAM
========================================== */

.session-preview-empty {
    width: 100%;
    min-height: 72px;

    display: flex;

    flex-direction: column;

    justify-content: center;
    align-items: center;

    box-sizing: border-box;

    background: var(--pp-surface-3);
}


.session-preview-icon {
    font-size: 16px;
    color: var(--text-muted);
}


/* ==========================================
   COACH PROFILE - ASSIGNED SESSIONS
========================================== */

.coach-session-list {
    display: flex;
    flex-direction: column;
    gap: 14px;

    margin-top: 22px;
}


/* SESSION CARD */

.coach-session-card {
    display: grid;

    grid-template-columns:
        85px
        minmax(0, 1fr);

    gap: 22px;

    padding: 20px;

    background: var(--bg-surface);

    border: 1px solid #353535;
    border-radius: 16px;

    transition:
        border-color .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}


.coach-session-card:hover {
    border-color: #4a4a4a;

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px
        rgba(0, 0, 0, .22);
}


/* ==========================================
   DATE
========================================== */

.coach-session-date {
    min-height: 85px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    background: #272727;

    border: 1px solid #383838;
    border-radius: 13px;
}


.coach-session-date strong {
    color: var(--brand-violet);

    font-size: 30px;
    line-height: 1;

    font-weight: 800;
}


.coach-session-date span {
    margin-top: 7px;

    color: #aaa;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1px;
}


/* ==========================================
   MAIN INFORMATION
========================================== */

.coach-session-main {
    min-width: 0;
}


.coach-session-heading {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;
}


.coach-session-heading h3 {
    margin:
        7px
        0
        0;

    color: #f5f5f5;

    font-size: 20px;
    line-height: 1.25;
}


/* CATEGORY */

.coach-session-heading
.session-drill-category {
    display: inline-flex;

    padding:
        5px
        9px;

    background:
        rgba(124, 92, 252, .12);

    color: var(--brand-violet);

    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;

    text-transform: uppercase;
}


/* ==========================================
   SESSION META
========================================== */

.coach-session-meta {
    display: flex;

    flex-wrap: wrap;

    gap: 10px 18px;

    margin-top: 15px;
}


.coach-session-meta span {
    color: #aaa;

    font-size: 14px;
}


/* ==========================================
   STATUS
========================================== */

.coach-session-heading
.session-status {
    flex-shrink: 0;

    display: inline-flex;

    align-items: center;

    padding:
        7px
        11px;

    border-radius: 999px;

    background: #292929;

    color: #ddd;

    border: 1px solid #3c3c3c;

    font-size: 12px;
    font-weight: 700;
}


/* SCHEDULED */

.coach-session-heading
.session-status-scheduled {
    background:
        rgba(45, 156, 219, .13);

    border-color:
        rgba(45, 156, 219, .28);

    color: var(--brand-cyan);
}


/* COMPLETED */

.coach-session-heading
.session-status-completed {
    background:
        rgba(39, 174, 96, .13);

    border-color:
        rgba(39, 174, 96, .28);

    color: var(--success);
}


/* DRAFT */

.coach-session-heading
.session-status-draft {
    background:
        rgba(124, 92, 252, .10);

    border-color:
        rgba(124, 92, 252, .25);

    color: var(--brand-violet);
}


/* ==========================================
   ACTIONS
========================================== */

.coach-session-actions {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 18px;
}


.coach-session-actions
.secondary-action {
    padding:
        10px
        15px;

    font-size: 13px;
}


/* ==========================================
   SECTION HEADER
========================================== */

#sessions .section-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 0;
}


#sessions .section-header h2 {
    margin-bottom: 6px;
}


#sessions .section-header p {
    margin: 0;

    color: #999;
}


#sessions .section-header
.primary-action {
    flex-shrink: 0;
}


/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 750px) {

    #sessions .section-header {
        align-items: flex-start;
        flex-direction: column;
    }


    .coach-session-card {
        grid-template-columns:
            65px
            minmax(0, 1fr);

        gap: 15px;

        padding: 15px;
    }


    .coach-session-date {
        min-height: 70px;
    }


    .coach-session-date strong {
        font-size: 24px;
    }


    .coach-session-heading {
        flex-direction: column;

        gap: 10px;
    }


    .coach-session-meta {
        flex-direction: column;

        gap: 7px;
    }

}

/* ==========================================
   PARENT - PLAYER SELECTOR
========================================== */

.parent-player-selector {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 20px;
}

.parent-player-option {
    position: relative;

    display: flex;
    align-items: center;

    padding: 15px;

    background: var(--bg-surface);

    border: 1px solid var(--pp-border-soft);
    border-radius: 14px;

    cursor: pointer;

    transition:
        border-color .15s ease,
        background .15s ease,
        transform .15s ease;
}

.parent-player-option:hover {
    border-color: var(--pp-border);
    transform: translateY(-1px);
}

.parent-player-option input {
    margin-right: 14px;
}

.parent-player-option:has(input:checked) {
    border-color: var(--brand-violet);
    background: rgba(124, 92, 252, .07);
}

.parent-player-option-main {
    display: flex;
    align-items: center;
    gap: 12px;
}

.parent-player-avatar {
    width: 46px;
    height: 46px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius: 12px;

    background: var(--pp-surface-2);

    color: var(--brand-violet);

    font-weight: 800;
}

.parent-player-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.parent-player-option-main > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.parent-player-option-main strong {
    color: var(--text-primary);
}

.parent-player-option-main span {
    color: var(--text-muted);
    font-size: 12px;
}

@media (max-width: 750px) {

    .parent-player-selector {
        grid-template-columns: 1fr;
    }

}

/* =====================================================
   PLAYERPATH UNIFIED DARK THEME
   Calendar + Parent Portal + Attendance
   (--pp-* tokens now aliased in the root design-token
   block at the top of this file)

   .dashboard-main padding and .page-header h1 size are
   intentionally NOT redeclared here - this used to
   duplicate the canonical rules near the top of the file
   (.dashboard-main at ~line 669, .page-header h1 at
   ~line 693) with smaller values that won by source
   order, quietly shrinking every page using them
   (including the whole Parent Portal). One definition
   now, up top - see it there instead of here.
===================================================== */

/* ---------- Shared page shell ---------- */

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 26px;
}

.page-header h1 {
    margin: 6px 0 6px;
    font-size: 36px;
    line-height: 1.1;
    color: var(--pp-text);
}

.page-header p {
    margin: 0;
    color: var(--pp-muted);
}

.eyebrow {
    margin: 0;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pp-accent);
}

.session-summary-card,
.attendance-parent-card {
    background: var(--pp-surface);
    border: 1px solid var(--pp-border-soft);
    border-radius: 18px;
    box-shadow: var(--pp-shadow);
}

/* ---------- Actions ---------- */

.primary-action,
.secondary-action,
.danger-action,
.profile-quick-action-link,
.squad-mini-btn {
    border-radius: 10px;
    font-weight: 800;
    transition: 0.15s ease;
}

/* .profile-quick-action-link and .squad-mini-btn set their own,
   smaller padding further down (and win on source order), so
   this only actually applies to primary/secondary/danger - the
   three full-size action buttons, which must always match. */
.primary-action,
.secondary-action,
.danger-action {
    padding: 14px 24px;
}

.primary-action {
    background: var(--pp-accent);
    color: var(--text-primary);
    border: 1px solid var(--pp-accent);
}

.primary-action:hover {
    background: var(--pp-accent-strong);
    transform: translateY(-1px);
}

.secondary-action,
.profile-quick-action-link,
.squad-mini-btn {
    background: var(--pp-surface-2);
    color: var(--pp-text);
    border: 1px solid var(--pp-border);
}

.secondary-action:hover,
.profile-quick-action-link:hover,
.squad-mini-btn:hover {
    background: var(--pp-surface-3);
    border-color: #444c57;
}

.danger-action {
    background: var(--pp-danger-soft);
    color: var(--danger);
    border: 1px solid rgba(240, 93, 108, 0.35);
}

.danger-action:hover {
    background: rgba(240, 93, 108, 0.18);
}

/* ---------- Ghost + icon buttons ---------- */

.ghost-action {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid transparent;
    border-radius: 10px;
    font-weight: 700;
    transition: var(--transition-default);
}

.ghost-action:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
    transition: var(--transition-fast);
    flex-shrink: 0;
}

.icon-button:hover {
    color: var(--text-primary);
    border-color: var(--brand-violet);
    background: var(--brand-violet-soft);
}

.icon-button.danger:hover {
    color: var(--danger);
    border-color: var(--danger);
    background: var(--danger-soft);
}

/* ---------- Shared action-button layout: icon + label ---------- */

.primary-action,
.secondary-action,
.danger-action,
.ghost-action,
.profile-quick-action-link,
.squad-mini-btn,
button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
}

.primary-action .icon,
.secondary-action .icon,
.danger-action .icon,
.ghost-action .icon {
    width: 16px;
    height: 16px;
}

/* ---------- Focus + disabled states (all interactive elements) ---------- */

a:focus-visible,
button:focus-visible,
summary:focus-visible,
.primary-action:focus-visible,
.secondary-action:focus-visible,
.danger-action:focus-visible,
.ghost-action:focus-visible,
.icon-button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--brand-cyan);
    outline-offset: 2px;
}

button:disabled,
.primary-action[disabled],
.secondary-action[disabled],
button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    transform: none !important;
}

.is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.is-loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin: -8px 0 0 -8px;
    border-radius: 50%;
    border: 2px solid rgba(247, 248, 252, 0.35);
    border-top-color: #fff;
    animation: pp-spin 0.6s linear infinite;
}

@keyframes pp-spin {
    to { transform: rotate(360deg); }
}

/* =====================================================
   CALENDAR FORMS
===================================================== */

.calendar-form-shell {
    max-width: 1180px;
    margin: 0 auto;
}

.calendar-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 18px;
}

.calendar-card-header h2 {
    margin: 4px 0 4px;
    font-size: 20px;
}

.calendar-card-header p {
    margin: 0;
    color: var(--pp-muted);
}

.calendar-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.calendar-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.calendar-field.full {
    grid-column: 1 / -1;
}

.calendar-field label {
    font-size: 13px;
    font-weight: 800;
    color: #d9dee6;
}

.calendar-hint {
    font-size: 11.5px;
    color: var(--text-muted);
    margin: 2px 0 0;
}

/* =====================================================
   ASSESSMENT TEMPLATE BUILDER
===================================================== */

.scale-type-help {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
}

.scale-type-help-item strong {
    display: block;
    font-size: 12.5px;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.scale-type-help-item span {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.criterion-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.template-row-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.template-row-locked {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    color: var(--text-muted);
}

.template-row-locked .icon {
    width: 15px;
    height: 15px;
}

/* ---------- Template list cards ---------- */

.template-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
}

.template-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--pp-surface);
    border: 1px solid var(--pp-border-soft);
    border-radius: 12px;
    padding: 18px;
    box-shadow: none;
    transition: background .15s ease, border-color .15s ease;
}

.template-card.pp-clickable {
    cursor: pointer;
}

.template-card:hover {
    border-color: var(--pp-border);
    background: var(--pp-surface-2);
}

.template-card.is-inactive {
    opacity: 0.7;
}

.template-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.template-card-top h3 {
    margin: 0 0 4px;
    font-size: 16px;
}

.template-card-description {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.template-card-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 12px;
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
}

.template-card-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: center;
}

.template-card-stat span {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.template-card-stat strong {
    font-size: 16px;
    color: var(--text-primary);
}

.template-card-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.template-category-chip {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--brand-violet-soft);
    color: var(--brand-violet-strong);
    font-size: 11px;
    font-weight: 700;
}

.template-category-chip-more {
    background: var(--bg-elevated);
    color: var(--text-muted);
}

.template-card-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding-top: 4px;
}

.calendar-field input,
.calendar-field select,
.calendar-field textarea,
.form-grid input,
.form-grid select,
.form-grid textarea,
.attendance-reason-box textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--pp-border);
    border-radius: 11px;
    padding: 11px 13px;
    background: #14171a;
    color: var(--pp-text);
    font: inherit;
}

.calendar-field input::placeholder,
.calendar-field textarea::placeholder,
.form-grid input::placeholder,
.form-grid textarea::placeholder {
    color: #626c79;
}

.calendar-field input:focus,
.calendar-field select:focus,
.calendar-field textarea:focus,
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus,
.attendance-reason-box textarea:focus {
    outline: none;
    border-color: var(--pp-accent);
    box-shadow: 0 0 0 3px var(--pp-accent-soft);
}

/* =====================================================
   SQUAD SELECTOR
===================================================== */

.squad-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.squad-counter {
    font-weight: 900;
    color: var(--pp-text);
}

.squad-toolbar-actions {
    display: flex;
    gap: 8px;
}

.squad-mini-btn {
    padding: 9px 12px;
    cursor: pointer;
}

.squad-grid,
.parent-player-selector {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.squad-player,
.parent-player-option {
    position: relative;
    display: block;
    background: var(--pp-surface-2);
    border: 1px solid var(--pp-border);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: 0.15s ease;
}

.squad-player:hover,
.parent-player-option:hover {
    border-color: #4a525e;
    transform: translateY(-1px);
}

.squad-player input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.squad-player-body,
.parent-player-option-main {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px;
}

.squad-player input:checked + .squad-player-body,
.parent-player-option:has(input:checked) {
    background: var(--pp-accent-soft);
    box-shadow: inset 0 0 0 1px var(--pp-accent);
    border-color: var(--pp-accent);
}

.squad-avatar,
.parent-player-avatar {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: #2a2f35;
    color: var(--pp-accent);
    font-weight: 900;
}

.squad-avatar img,
.parent-player-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.squad-player-name,
.parent-player-option-main strong {
    display: block;
    color: var(--pp-text);
    font-weight: 850;
}

.squad-player-meta,
.parent-player-option-main span {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    color: var(--pp-muted);
}

.squad-check {
    margin-left: auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid #515965;
    color: transparent;
    font-weight: 900;
}

.squad-player input:checked + .squad-player-body .squad-check {
    background: var(--pp-accent);
    color: var(--text-primary);
    border-color: var(--pp-accent);
}

.calendar-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 22px;
}

/* =====================================================
   CALENDAR LIST / EVENT CARDS
===================================================== */

.calendar-event-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.calendar-event-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 14px;
    background: var(--pp-surface);
    border: 1px solid var(--pp-border-soft);
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    transition: 0.15s ease;
}

.calendar-event-card:hover {
    transform: translateY(-1px);
    border-color: #444c57;
    background: #1c2025;
}

.calendar-date-box {
    width: 62px;
    min-width: 62px;
    border-radius: 12px;
    background: var(--pp-accent);
    color: var(--text-primary);
    text-align: center;
    padding: 8px 6px;
}

.calendar-date-box span {
    display: block;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.calendar-date-box strong {
    display: block;
    margin-top: 1px;
    font-size: 22px;
}

.calendar-event-main {
    flex: 1;
    min-width: 0;
}

.calendar-event-main h3 {
    margin: 4px 0 5px;
    font-size: 16px;
    color: var(--pp-text);
}

.calendar-event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    font-size: 12px;
    color: var(--pp-muted);
}

.calendar-type-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 900;
    background: var(--pp-accent-soft);
    color: var(--pp-accent);
}

.calendar-event-status {
    font-size: 18px;
    color: var(--pp-muted-2);
}

.calendar-event-past {
    opacity: 0.6;
}

/* =====================================================
   SUMMARY CARDS
   (canonical .session-summary-* rules live near line 3976
   - this section used to redeclare them with smaller,
   !important-forced values that silently won everywhere
   these cards appear, most visibly on the Parent Portal.
   display:block on span/strong/small from the old rules
   here is preserved below since .session-summary-card is
   already flex/column at the canonical definition.)
===================================================== */

.session-summary-card > span,
.session-summary-card > strong,
.session-summary-card > small {
    display: block;
}

/* =====================================================
   QUICK-ADD INLINE FORMS
   Programs / Teams / Venues, Roster "Add player" - a
   short row of input(s)/select + submit button. The
   global bare `button{ width:100% }` rule (~line 432)
   was crushing the input/select next to it down to the
   browser's minimum content width whenever it shared a
   flex row like this - .quick-add-form button below is
   specific enough (class + element) to win over that
   rule regardless of source order, so the button goes
   back to sizing itself by its label instead of eating
   the whole row.
===================================================== */

.quick-add-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--pp-border-soft);
}

.quick-add-form .form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 160px;
    min-width: 0;
}

.quick-add-form .form-field label {
    font-size: 12px;
    font-weight: 700;
    color: var(--pp-muted);
}

.quick-add-form input,
.quick-add-form select {
    width: 100%;
    min-width: 0;
}

.quick-add-form button {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
}

/* Modifier for a form stacked in a single narrow column
   (e.g. Venues, in the sidebar of Programs/Teams/Venues) -
   flex-direction:column makes the main axis vertical, so
   .form-field's 160px flex-basis would otherwise apply to
   HEIGHT and stretch each field with empty space. */
.quick-add-form--stacked {
    flex-direction: column;
    align-items: stretch;
}

.quick-add-form--stacked .form-field {
    flex: 0 0 auto;
}

.quick-add-form--stacked button {
    width: 100%;
}

@media (max-width: 640px) {
    .quick-add-form:not(.quick-add-form--stacked) {
        flex-direction: column;
        align-items: stretch;
    }

    .quick-add-form:not(.quick-add-form--stacked) .form-field {
        flex: 0 0 auto;
    }

    .quick-add-form:not(.quick-add-form--stacked) button {
        width: 100%;
    }
}

/* =====================================================
   DECISION CARD
   Registration review Approve/Reject - was two floating
   .page-header rows (one an empty <div> just to push the
   buttons right), reading as disconnected from the content
   above and below it. Now a single card with the decision
   framed as its own clear step.
===================================================== */

.decision-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}

.decision-card-heading h2 {
    margin: 4px 0 4px;
}

.decision-card-heading p {
    margin: 0;
    color: var(--pp-muted);
    max-width: 46ch;
}

.decision-card-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.decision-reject-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.decision-reject-form input {
    width: 220px;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .decision-card-actions,
    .decision-reject-form {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .decision-reject-form input {
        width: 100%;
    }

    .decision-card-actions .primary-action,
    .decision-reject-form .danger-action {
        width: 100%;
    }
}

/* Visually hidden but still reachable by screen readers -
   used where a label would repeat what the placeholder
   already says on screen, but the input still needs a
   real accessible name. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(280px, 0.8fr);
    gap: 18px;
    align-items: start;
}

/* The actual grid items are these bare column wrappers, not the
   .pp-panel/.info-card sitting inside them - without min-width:0
   here, a wide descendant (a data table, in particular) can force
   the whole column past its track width even though the table
   itself scrolls internally via .table-card. */
.profile-grid > div,
.profile-grid > aside {
    min-width: 0;
}

/* =====================================================
   ATTENDANCE
===================================================== */

.attendance-parent-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.attendance-parent-card {
    padding: 16px;
    background: var(--pp-surface-2);
    border: 1px solid var(--pp-border);
}

.attendance-parent-player {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 14px;
}

.attendance-parent-player strong {
    display: block;
    color: var(--pp-text);
}

.attendance-parent-player span {
    display: block;
    margin-top: 3px;
    color: var(--pp-muted);
    font-size: 12px;
}

.attendance-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 12px;
}

.attendance-choice {
    position: relative;
    display: block;
    cursor: pointer;
}

.attendance-choice input {
    position: absolute;
    opacity: 0;
}

.attendance-choice span {
    display: block;
    padding: 11px 13px;
    border-radius: 10px;
    border: 1px solid var(--pp-border);
    background: #171a1e;
    color: #d9dee6;
    font-weight: 800;
    text-align: center;
}

.attendance-choice input:checked + span {
    border-color: var(--pp-accent);
    background: var(--pp-accent-soft);
    color: var(--pp-accent);
}

.attendance-reason-box {
    margin-bottom: 12px;
}

/* =====================================================
   VISIBILITY / QUICK ACTIONS
===================================================== */

.calendar-visibility-option,
.visibility-card {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    border: 1px solid var(--pp-border);
    border-radius: 12px;
    padding: 14px;
    background: var(--pp-surface-2);
}

.calendar-visibility-option input,
.visibility-card input {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    accent-color: var(--pp-accent);
}

.calendar-visibility-option strong,
.calendar-visibility-option span,
.visibility-card strong,
.visibility-card span {
    display: block;
}

.calendar-visibility-option strong,
.visibility-card strong {
    color: var(--pp-text);
}

.calendar-visibility-option span,
.visibility-card span {
    margin-top: 3px;
    color: var(--pp-muted);
}

.profile-quick-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.profile-quick-action-link {
    display: block;
    padding: 10px 12px;
    text-decoration: none;
}

/* =====================================================
   FEEDBACK STATES
===================================================== */

.success-message,
.error-message,
.warning-message {
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 16px;
    font-weight: 700;
}

.success-message {
    background: var(--pp-success-soft);
    color: var(--success);
    border: 1px solid rgba(45, 212, 168, 0.35);
}

.error-message {
    background: var(--pp-danger-soft);
    color: var(--danger);
    border: 1px solid rgba(240, 93, 108, 0.35);
}

.warning-message {
    background: var(--warning-soft);
    color: var(--warning);
    border: 1px solid rgba(245, 185, 66, 0.35);
}

/* .empty-state itself (and h3/p) is consolidated near the top
   of the file next to .empty-icon, ahead of .setup-empty - see
   the comment there. Keeping it ahead of .setup-empty in source
   order matters: .setup-empty's min-height:auto override (used
   by the compact Programs/Teams/Venues empty states) must stay
   the later, winning declaration. */

/* =====================================================
   ATTENDANCE RECORDING (ADMIN)
===================================================== */

.attendance-record-buttons {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.attendance-record-btn {
    border: 1px solid var(--pp-border);
    background: #15181c;
    color: var(--pp-muted);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.15s ease;
}

.attendance-record-btn:hover {
    border-color: var(--pp-accent);
    color: var(--pp-text);
}

.attendance-record-btn.present.active {
    background: rgba(45, 212, 168, 0.16);
    border-color: rgba(45, 212, 168, 0.5);
    color: var(--success);
}

.attendance-record-btn.absent.active {
    background: rgba(240, 93, 108, 0.16);
    border-color: rgba(240, 93, 108, 0.5);
    color: var(--danger);
}

.attendance-record-btn.excused.active {
    background: rgba(124, 92, 252, 0.16);
    border-color: rgba(124, 92, 252, 0.5);
    color: var(--brand-violet);
}

.attendance-record-btn.late.active {
    background: rgba(245, 185, 66, 0.16);
    border-color: rgba(245, 185, 66, 0.5);
    color: var(--warning);
}

.attendance-record-btn.injured.active {
    background: rgba(240, 93, 108, 0.16);
    border-color: rgba(240, 93, 108, 0.5);
    color: var(--danger);
}

/* Anchor-based player switcher (Parent stats/reports/attendance pages) */
a.parent-player-option.active {
    background: var(--pp-accent-soft);
    box-shadow: inset 0 0 0 1px var(--pp-accent);
    border-color: var(--pp-accent);
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1050px) {
    .session-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profile-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .dashboard-main {
        padding: 20px;
    }

    .page-header {
        flex-direction: column;
    }

    .calendar-form-grid,
    .squad-grid,
    .parent-player-selector,
    .attendance-choice-grid,
    .session-summary-grid {
        grid-template-columns: 1fr;
    }
}

/* ======================================================
PARENT HOME - MY CHILDREN
====================================================== */

.child-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
    margin-top: 18px;
}

.child-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 20px;
    text-decoration: none;
    color: var(--text-primary);
    transition: var(--transition-default);
    position: relative;
    overflow: hidden;
}

.child-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--brand-gradient);
    opacity: 0;
    transition: var(--transition-default);
}

.child-card:hover {
    border-color: var(--brand-violet);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.child-card:hover::before {
    opacity: 1;
}

.child-card-avatar {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 19px;
    color: var(--brand-cyan);
    flex-shrink: 0;
    overflow: hidden;
}

.child-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.child-card-info {
    flex: 1;
    min-width: 0;
}

.child-card-info strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.child-card-info span {
    display: block;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.child-card-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--success);
}

.child-card-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 6px var(--success);
}

.child-card-status.status-inactive {
    color: var(--text-muted);
}

.child-card-status.status-inactive::before {
    background: var(--text-muted);
    box-shadow: none;
}

.child-card-chevron {
    flex-shrink: 0;
    color: var(--text-muted);
    transition: var(--transition-default);
}

.child-card:hover .child-card-chevron {
    color: var(--brand-cyan);
    transform: translateX(3px);
}

/* ======================================================
MONTH CALENDAR
====================================================== */

.month-calendar {
    margin-top: 18px;
}

.month-calendar-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}

.month-calendar-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

.month-calendar-nav-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-default);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    text-decoration: none;
    transition: var(--transition-fast);
}

.month-calendar-nav-btn:hover {
    color: var(--brand-cyan);
    border-color: var(--brand-cyan);
}

.month-calendar-today-btn {
    height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-default);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: var(--transition-fast);
}

.month-calendar-today-btn:hover {
    color: var(--text-primary);
    border-color: var(--brand-violet);
}

.month-calendar-label {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.month-calendar-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 12.5px;
    color: var(--text-secondary);
}

.month-calendar-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.month-calendar-legend i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.month-calendar-legend i.dot-training { background: var(--brand-violet); }
.month-calendar-legend i.dot-match { background: var(--brand-cyan); }
.month-calendar-legend i.dot-other { background: var(--text-muted); }

.month-calendar-grid {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-surface);
}

.month-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border-default);
}

.month-calendar-weekdays span {
    padding: 10px 8px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    text-transform: uppercase;
}

.month-calendar-weeks {
    display: grid;
}

.month-calendar-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.month-calendar-day {
    min-height: 108px;
    border-right: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.month-calendar-week .month-calendar-day:last-child {
    border-right: none;
}

.month-calendar-day.out-of-month {
    background: rgba(13, 17, 28, 0.5);
}

.month-calendar-day.out-of-month .month-calendar-day-num {
    color: var(--text-muted);
    opacity: 0.5;
}

.month-calendar-day-num {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.month-calendar-day.is-today .month-calendar-day-num {
    background: var(--brand-gradient);
    color: #070A12;
    font-weight: 700;
}

.month-calendar-day-events {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.month-event-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 7px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--text-primary);
    border-left: 2px solid transparent;
    background: var(--bg-elevated);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: var(--transition-fast);
}

.month-event-chip:hover {
    background: var(--bg-elevated-2);
}

.month-event-chip.type-training {
    border-left-color: var(--brand-violet);
}

.month-event-chip.type-match {
    border-left-color: var(--brand-cyan);
}

.month-event-chip.type-other {
    border-left-color: var(--text-muted);
}

.month-event-chip-badge {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--bg-elevated-2);
    color: var(--text-secondary);
    font-size: 8.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.month-calendar-more {
    font-size: 10.5px;
    color: var(--text-muted);
    padding: 2px 7px;
}

.month-calendar-empty-day {
    flex: 1;
}

@media (max-width: 900px) {

    .month-calendar-grid,
    .month-calendar-weekdays {
        display: none;
    }

    .month-calendar-agenda {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
}

@media (min-width: 901px) {

    .month-calendar-agenda {
        display: none;
    }
}

.month-calendar-agenda-day {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    padding: 12px 14px;
}

.month-calendar-agenda-day.is-today {
    border-color: var(--brand-violet);
}

.month-calendar-agenda-date {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}

.month-calendar-agenda-day.is-today .month-calendar-agenda-date {
    color: var(--brand-cyan);
}

.month-calendar-agenda-event {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--border-soft);
    text-decoration: none;
    color: var(--text-primary);
}

.month-calendar-agenda-event:first-of-type {
    border-top: none;
}

.month-calendar-agenda-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.month-calendar-agenda-dot.type-training { background: var(--brand-violet); }
.month-calendar-agenda-dot.type-match { background: var(--brand-cyan); }
.month-calendar-agenda-dot.type-other { background: var(--text-muted); }

.month-calendar-agenda-main {
    flex: 1;
    min-width: 0;
}

.month-calendar-agenda-main strong {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    margin-bottom: 2px;
}

.month-calendar-agenda-main span {
    font-size: 12px;
    color: var(--text-secondary);
}

/* ======================================================
MESSAGING
====================================================== */

.messages-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 0;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    overflow: hidden;
    margin-top: 18px;
    min-height: 640px;
}

.conversation-list-panel {
    border-right: 1px solid var(--border-default);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.conversation-list-header {
    padding: 18px 18px 14px;
    border-bottom: 1px solid var(--border-default);
}

.conversation-list-header h2 {
    font-size: 16px;
    margin: 0 0 12px;
}

.new-conversation-toggle summary {
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
    transition: var(--transition-fast);
}

.new-conversation-toggle summary:hover {
    color: var(--text-primary);
}

.new-conversation-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.new-conversation-actions p {
    margin: 0;
}

.new-conversation-select-row {
    display: flex;
    gap: 6px;
}

.new-conversation-select-row select {
    flex: 1;
    min-width: 0;
}

.new-conversation-select-row .new-conversation-btn {
    width: auto;
}

.new-conversation-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    border: 1px dashed var(--border-default);
    background: transparent;
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
}

.new-conversation-btn:hover {
    border-color: var(--msg-accent);
    color: var(--text-primary);
}

.conversation-list {
    flex: 1;
    overflow-y: auto;
}

.conversation-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-soft);
    text-decoration: none;
    color: var(--text-primary);
    transition: var(--transition-fast);
    position: relative;
}

.conversation-item:hover {
    background: var(--bg-elevated);
}

.conversation-item.active {
    background: var(--bg-elevated);
    box-shadow: inset 3px 0 0 var(--msg-accent);
}

.conversation-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--bg-elevated-2);
    border: 1px solid var(--border-default);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    color: var(--brand-cyan);
    flex-shrink: 0;
}

.conversation-item-body {
    flex: 1;
    min-width: 0;
}

.conversation-item-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.conversation-item-top strong {
    font-size: 13.5px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conversation-item-time {
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.conversation-item-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 2px;
}

.conversation-item-preview span {
    font-size: 12.5px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conversation-item.has-unread .conversation-item-preview span {
    color: var(--text-primary);
    font-weight: 600;
}

.conversation-unread-dot {
    flex-shrink: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--msg-accent-gradient);
    color: var(--msg-on-accent);
    font-size: 10.5px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.chat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-default);
}

.chat-header-back {
    display: none;
    color: var(--text-secondary);
}

.chat-header-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-elevated-2);
    border: 1px solid var(--border-default);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    color: var(--brand-cyan);
    flex-shrink: 0;
}

.chat-header-info strong {
    display: block;
    font-size: 14.5px;
}

.chat-header-info span {
    font-size: 12px;
    color: var(--text-muted);
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chat-bubble-row {
    display: flex;
    flex-direction: column;
    max-width: 68%;
}

.chat-bubble-row.own {
    align-self: flex-end;
    align-items: flex-end;
}

.chat-bubble-row.other {
    align-self: flex-start;
    align-items: flex-start;
}

.chat-bubble {
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 13.5px;
    line-height: 1.5;
    white-space: pre-line;
    word-break: break-word;
}

.chat-bubble-row.own .chat-bubble {
    background: var(--msg-accent-gradient);
    color: var(--msg-on-accent);
    border-bottom-right-radius: 4px;
}

.chat-bubble-row.other .chat-bubble {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    color: var(--text-primary);
    border-bottom-left-radius: 4px;
}

.chat-bubble-meta {
    font-size: 10.5px;
    color: var(--text-muted);
    margin-top: 4px;
    padding: 0 4px;
}

.chat-composer {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid var(--border-default);
}

.chat-composer textarea {
    flex: 1;
    resize: none;
    min-height: 42px;
    max-height: 140px;
    padding: 11px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-default);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13.5px;
}

.chat-composer textarea:focus {
    outline: none;
    border-color: var(--brand-violet);
}

.chat-composer button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    border: none;
    background: var(--brand-gradient);
    color: #070A12;
    cursor: pointer;
    flex-shrink: 0;
    transition: var(--transition-fast);
}

.chat-composer button:hover {
    filter: brightness(1.08);
}

.chat-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--text-muted);
    gap: 10px;
    padding: 40px;
}

.chat-empty-state h3 {
    color: var(--text-primary);
    margin: 0;
}

@media (max-width: 900px) {

    .messages-layout {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .conversation-list-panel {
        border-right: none;
    }

    .messages-layout.has-active .conversation-list-panel {
        display: none;
    }

    .messages-layout:not(.has-active) .chat-panel {
        display: none;
    }

    .chat-header-back {
        display: flex;
    }

    .chat-messages {
        max-height: 60vh;
    }
}

/* =====================================================
   GLOBAL COMPONENT LIBRARY (LOTE 1 — Fundação)
   New, purely-additive primitives that did not exist
   anywhere in the codebase before this pass. Nothing here
   is wired into any template yet - that migration happens
   page-by-page in later lots. Reference for what already
   exists and is reusable as-is (no changes needed, already
   used exactly this way by /academy/programs):
     - page shell:      .dashboard-main
     - page header:     .page-header, .eyebrow
     - buttons:         .primary-action / .secondary-action /
                         .danger-action / .ghost-action / .icon-button
     - module/list row: .setup-module, .setup-row, .setup-row-*
     - action menu:     .row-menu (details/summary dropdown)
     - drawer:          .setup-drawer
     - status/count:    .dashboard-status, .setup-row-count
     - empty state:     .empty-state
     - alert/callout:   .dashboard-alert
     - stat strip:      .setup-overview
     - breadcrumbs:     .breadcrumbs (components/breadcrumbs.html)
     - form fields:     .form-group / .form-field + the global
                         input/select/textarea base style
     - tabs (existing): .profile-tab (coach/athlete/parent profile
                         pages) - functional today; accessibility
                         (role="tab"/aria-selected) still to add
                         when a page in that area is migrated.
   Genuinely new below: avatar, checkbox/radio theming,
   pagination, a centered modal (the drawer is edge-anchored;
   this is for confirmations and short single-field prompts),
   and a generalized search/filter toolbar to replace one-off
   variants like .athletes-toolbar.
===================================================== */

/* ---------- Avatar ---------- */

.pp-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--brand-violet-soft);
    color: var(--brand-violet-strong);
    font-weight: 800;
    overflow: hidden;
}

.pp-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pp-avatar-sm { width: 32px; height: 32px; font-size: 12px; }
.pp-avatar-md { width: 44px; height: 44px; font-size: 15px; }
.pp-avatar-lg { width: 64px; height: 64px; font-size: 20px; }

/* ---------- Checkbox / radio ---------- */

input[type="checkbox"],
input[type="radio"] {
    width: auto;
    accent-color: var(--brand-violet);
}

.pp-check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
}

.pp-check-row label {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
}

/* ---------- Search / filter toolbar ---------- */

.pp-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

/* A toolbar living directly inside a .setup-module (below its
   header, above its .setup-list) needs the module's own
   horizontal rhythm instead of the default bottom margin. */
.setup-module .pp-toolbar {
    padding: 14px 18px 0;
    margin-bottom: 0;
}

.setup-module .pp-toolbar + .setup-list,
.setup-module .pp-toolbar + .setup-empty {
    margin-top: 14px;
}

.pp-toolbar .search-box,
.pp-toolbar input[type="search"],
.pp-toolbar input[type="text"] {
    flex: 1 1 220px;
    margin-bottom: 0;
}

.pp-toolbar select {
    width: auto;
    min-width: 160px;
}

@media (max-width: 640px) {
    .pp-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .pp-toolbar select {
        width: 100%;
    }
}

/* ---------- Pagination ---------- */

.pp-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 24px;
}

.pp-pagination button,
.pp-pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid var(--pp-border-soft);
    background: var(--pp-surface);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
}

.pp-pagination button:hover,
.pp-pagination a:hover {
    border-color: var(--pp-border);
    background: var(--pp-surface-2);
    color: var(--text-primary);
}

.pp-pagination .is-current {
    background: var(--pp-accent-soft);
    border-color: var(--brand-violet);
    color: var(--brand-violet-strong);
}

.pp-pagination button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

@media (max-width: 480px) {
    .pp-pagination button,
    .pp-pagination a {
        min-width: 44px;
        height: 44px;
    }
}

/* ---------- Modal (centered dialog) ----------
   Same open/close/backdrop/focus-trap mechanics as
   .setup-drawer, just anchored to the center instead of an
   edge - for short confirmations and single-field prompts
   rather than full creation forms. */

.pp-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
}

.pp-modal.is-open {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.pp-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 8, 12, 0.6);
}

.pp-modal-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: var(--pp-surface);
    border: 1px solid var(--pp-border-soft);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.pp-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pp-modal-header h3 {
    margin: 0;
    font-size: 17px;
}

.pp-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 8px;
    border: 1px solid var(--pp-border-soft);
    background: transparent;
    color: var(--gray2);
    cursor: pointer;
}

.pp-modal-close:hover {
    color: var(--text-primary);
    background: var(--pp-surface-2);
}

.pp-modal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

@media (max-width: 480px) {
    .pp-modal.is-open {
        padding: 0;
        align-items: flex-end;
    }

    .pp-modal-panel {
        max-width: 100%;
        width: 100%;
        max-height: 88vh;
        border-radius: 16px 16px 0 0;
    }
}

/* =====================================================
   LOTE 2A — Athletes / Coaches / Calendar detail pages
   Lighter alternatives to .info-card/.info-item (which are
   still used as-is by pages outside this lot's scope, so
   left untouched). .pp-panel is a hairline-bordered section
   with no shadow; .pp-field-grid replaces the nested mini
   "card per field" look of .info-item with plain label/value
   pairs; .pp-detail-header replaces .profile-header for a
   more compact identity + actions row.
===================================================== */

.pp-panel {
    background: var(--pp-surface);
    border: 1px solid var(--pp-border-soft);
    border-radius: 14px;
    padding: 20px 22px;
    /* .pp-panel is often a grid/flex item (e.g. inside .profile-grid).
       Without this, a wide descendant (a data table, in particular)
       can force the panel past its track width even though the
       table itself scrolls internally via .table-card - the grid
       item's own auto min-width still expands to fit content. */
    min-width: 0;
}

.pp-panel + .pp-panel {
    margin-top: 14px;
}

.pp-panel h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.pp-panel h2 .icon {
    width: 16px;
    height: 16px;
    color: var(--brand-violet-strong);
}

.pp-panel > p {
    color: var(--text-secondary);
    font-size: 13.5px;
}

.pp-panel > p:last-child {
    margin-bottom: 0;
}

.pp-panel-compact {
    padding: 14px 18px;
}

.pp-panel-compact p {
    margin: 0;
    font-size: 13.5px;
}

.pp-panel-success {
    border-color: rgba(45, 212, 168, 0.35);
}

.pp-panel-inline {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    align-items: center;
    color: var(--text-secondary);
    font-size: 13px;
}

.pp-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.pp-panel-head h2 {
    margin: 0 0 4px;
}

.pp-panel-head p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
}

/* ---------- Field grid (label/value pairs) ---------- */

.pp-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px 20px;
}

.pp-field {
    min-width: 0;
}

.pp-field-label {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.pp-field-value {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    overflow-wrap: break-word;
}

.pp-field-value.is-empty {
    color: var(--text-muted);
    font-weight: 500;
    font-style: italic;
}

.pp-field-value a {
    color: var(--brand-violet-strong);
}

/* ---------- Detail header (avatar + identity + actions) ---------- */

.pp-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 18px 22px;
    background: var(--pp-surface);
    border: 1px solid var(--pp-border-soft);
    border-radius: 14px;
    margin-bottom: 20px;
}

.pp-detail-identity {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.pp-detail-text {
    min-width: 0;
}

.pp-detail-text h1 {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 4px;
    font-size: 21px;
}

.pp-detail-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    color: var(--text-secondary);
    font-size: 13px;
}

.mono-id {
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 11.5px;
    color: var(--text-muted);
}

.pp-detail-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

@media (max-width: 640px) {
    .pp-detail-header {
        flex-direction: column;
        align-items: stretch;
    }

    .pp-detail-actions {
        justify-content: stretch;
    }

    .pp-detail-actions .primary-action {
        flex: 1;
        justify-content: center;
    }

    .pp-field-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 420px) {
    .pp-field-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   LOTE 2A (closeout) — detail lists, forms, stepper
===================================================== */

/* ---------- Repeating content inside a .pp-panel
   (upcoming schedule, attendance records, development
   reports, coach sessions) - hairline dividers between
   rows instead of a bordered box per row. ---------- */

.pp-list {
    display: flex;
    flex-direction: column;
}

.pp-list-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--pp-border-soft);
}

.pp-list-row:first-child {
    padding-top: 0;
}

.pp-list-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.pp-list-label {
    min-width: 0;
    color: var(--text-muted);
    font-size: 12px;
}

.pp-list-label strong {
    display: block;
    margin-top: 2px;
    color: var(--text-primary);
    font-size: 13.5px;
    font-weight: 600;
}

.pp-list-label a {
    color: var(--text-primary);
}

.pp-list-value {
    flex: 0 0 auto;
    text-align: right;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 13px;
}

.pp-list-value small {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
    font-weight: 500;
    font-size: 11.5px;
}

@media (max-width: 480px) {
    .pp-list-row {
        flex-direction: column;
        gap: 4px;
    }

    .pp-list-value {
        text-align: left;
    }
}

/* ---------- Form section / actions (inside .pp-panel) ---------- */

.pp-form-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pp-form-section + .pp-form-section {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--pp-border-soft);
}

.pp-form-section h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}

.pp-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.pp-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
}

@media (max-width: 560px) {
    .pp-form-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .pp-form-actions > * {
        width: 100%;
        justify-content: center;
    }
}

/* ---------- Per-athlete attendance row (Calendar event detail) ---------- */

.pp-attendance-row {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(160px, 1fr) minmax(220px, 1.4fr);
    gap: 20px;
    padding: 14px 0;
    border-bottom: 1px solid var(--pp-border-soft);
}

.pp-attendance-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.pp-attendance-row:first-child {
    padding-top: 0;
}

.pp-attendance-player strong {
    display: block;
    font-size: 13.5px;
    color: var(--text-primary);
}

.pp-attendance-player span {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--text-muted);
}

.pp-attendance-rsvp,
.pp-attendance-actions {
    min-width: 0;
}

.pp-attendance-rsvp .pp-field-value,
.pp-attendance-actions .pp-field-value {
    margin-top: 2px;
}

.pp-attendance-rsvp small,
.pp-attendance-actions small {
    display: block;
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.5;
}

@media (max-width: 760px) {
    .pp-attendance-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* ---------- Assessment scoring row (Lote 2b) ----------
   One row per criterion inside an assessment's scoring form:
   name, the score control (numeric input or a custom-label
   picker), and an optional comment. Built to replace the
   previously-unstyled .reg-choice-group/.reg-choice markup
   (those classes only exist in registration.css, which never
   loads on this admin page, so custom-label scoring rendered
   as bare unstyled radio inputs before this). */
.pp-score-row {
    padding: 14px 0;
    border-bottom: 1px solid var(--pp-border-soft);
}

.pp-score-row:last-child {
    border-bottom: none;
}

.pp-score-row-label {
    display: block;
    margin-bottom: 10px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-primary);
}

.pp-score-row .pp-score-number {
    width: 100%;
    max-width: 140px;
    height: 44px;
}

.pp-score-row .pp-score-comment {
    display: block;
    width: 100%;
    max-width: 420px;
    margin-top: 10px;
    height: 44px;
}

/* Segmented pill picker for custom-label scales - each option is
   a real label wrapping a radio input, sized as a >=44px touch
   target, laid out to wrap on narrow/mobile viewports. */
.pp-scale-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pp-scale-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--pp-border);
    border-radius: 999px;
    background: var(--pp-surface-2);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.pp-scale-option input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.pp-scale-option:has(input:checked) {
    border-color: var(--brand-violet);
    background: var(--pp-accent-soft);
    color: var(--brand-violet);
}

.pp-scale-option:has(input:focus-visible) {
    outline: 2px solid var(--brand-cyan);
    outline-offset: 2px;
}

@media (max-width: 560px) {
    .pp-score-row .pp-score-number,
    .pp-score-row .pp-score-comment {
        max-width: none;
    }
}