:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#162019;background:#f4f7f5}*{box-sizing:border-box}body{margin:0}.topbar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.9rem 1rem;background:#176b3a;color:#fff;box-shadow:0 2px 12px #0002}.topbar a{color:#fff;text-decoration:none}.topbar nav{display:flex;gap:.8rem;flex-wrap:wrap}.brand{font-weight:800}.container{width:min(1050px,100%);margin:auto;padding:1rem}.narrow{width:min(620px,100%)}h1{font-size:1.65rem}h2{margin-top:2rem}.card{background:#fff;border:1px solid #d9e3dc;border-radius:14px;padding:1rem;box-shadow:0 4px 14px #0000000d}.card-list{display:grid;gap:1rem}.form-grid{display:grid;gap:1rem}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:1rem}label{display:grid;gap:.4rem;font-weight:650}input,select,textarea,button,.button{font:inherit;border-radius:10px;border:1px solid #b8c8bd;padding:.75rem;background:#fff}textarea{resize:vertical}button,.button{display:inline-block;background:#176b3a;color:#fff;border-color:#176b3a;text-decoration:none;font-weight:700;cursor:pointer;text-align:center}.secondary{background:#fff;color:#176b3a}.danger{background:#a52222;border-color:#a52222}.selected{outline:3px solid #efb21c}.toolbar,.inline{display:flex;gap:.6rem;align-items:center}.wrap{flex-wrap:wrap}.toolbar{margin-bottom:1rem;flex-wrap:wrap}.inline input{flex:1}.flash{padding:.9rem;border-radius:10px;margin-bottom:1rem}.success{background:#dff4e6}.error{background:#ffe1e1}.meta{font-size:.82rem;color:#617267}.comment{margin-top:.8rem;padding:.7rem;border-left:4px solid #d5dfd8;background:#f7faf8}.comment-form{margin-top:.8rem}.document-link{font-weight:700}.compact{padding:.7rem}.check{display:flex;grid-template-columns:auto 1fr;align-items:center}.check input{width:auto}.auth-card{max-width:520px;margin:auto}@media(max-width:650px){.two-col{grid-template-columns:1fr}.topbar{align-items:flex-start;flex-direction:column}.container{padding:.8rem}.inline.comment-form{align-items:stretch}.inline.comment-form input{min-width:0}.toolbar .button{flex:1}}
.invite-code-panel{
    position:sticky;
    top:76px;
    z-index:15;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
    margin:0 0 1rem;
    padding:1rem;
    border:2px solid #176b3a;
    border-radius:14px;
    background:#fff;
    box-shadow:0 5px 18px #0002
}
.invite-code-label{
    font-size:.82rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:#53675a
}
.invite-code-team{font-weight:750;margin-top:.15rem}
.invite-code-value{
    margin:.2rem 0;
    font-size:1.8rem;
    line-height:1.1;
    font-weight:900;
    letter-spacing:.12em;
    color:#176b3a;
    overflow-wrap:anywhere
}
.invite-code-help{font-size:.9rem;color:#617267}
.invite-code-actions{
    display:flex;
    gap:.6rem;
    flex-wrap:wrap;
    justify-content:flex-end
}
.invite-code-actions .button{white-space:nowrap}
@media(max-width:650px){
    .invite-code-panel{
        top:116px;
        align-items:stretch;
        flex-direction:column
    }
    .invite-code-actions{
        display:grid;
        grid-template-columns:1fr 1fr
    }
    .invite-code-value{font-size:1.55rem}
}

.notification-setup{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
    margin-bottom:1rem
}
.notification-status{
    margin-top:.3rem;
    color:#617267;
    font-size:.92rem
}
.notification-buttons{
    display:flex;
    gap:.6rem;
    flex-wrap:wrap
}
button:disabled{
    cursor:not-allowed;
    opacity:.65
}
@media(max-width:650px){
    .notification-setup{
        align-items:stretch;
        flex-direction:column
    }
    .notification-buttons{
        display:grid;
        grid-template-columns:1fr 1fr
    }
}

.latest-parent-comment{
    margin-top:1rem;
    padding:.85rem;
    border:1px solid #c9d8ce;
    border-left:5px solid #176b3a;
    border-radius:10px;
    background:#f7faf8
}
.latest-parent-comment p{
    margin:.45rem 0 0
}
.latest-comment-label{
    margin-bottom:.35rem;
    font-size:.75rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.055em;
    color:#617267
}
.comment-time{
    margin-left:.35rem;
    font-size:.78rem;
    font-weight:400;
    color:#718078
}
.coach-comments-collapse{
    margin-top:.75rem;
    border-top:1px solid #d9e3dc;
    padding-top:.65rem
}
.coach-comments-collapse summary{
    color:#176b3a;
    font-weight:750;
    cursor:pointer
}
.coach-comments-list{
    display:grid;
    gap:.6rem;
    margin-top:.65rem
}
.no-parent-comments{
    margin-top:.8rem;
    padding:.65rem;
    border-radius:8px;
    background:#f4f7f5;
    color:#718078;
    font-size:.9rem
}

.admin-summary-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1rem;
    margin-bottom:1rem
}
.admin-stat{
    display:grid;
    gap:.25rem;
    text-align:center
}
.admin-stat strong{
    font-size:2rem;
    color:#176b3a
}
.admin-stat span{
    color:#617267;
    font-weight:700
}
.admin-filter-form{
    display:grid;
    grid-template-columns:2fr 1fr 1fr auto;
    gap:1rem;
    align-items:end;
    margin-bottom:1rem
}
.admin-filter-buttons{
    display:flex;
    gap:.5rem
}
.admin-user-list{
    display:grid;
    gap:1rem
}
.admin-user-main{
    display:flex;
    justify-content:space-between;
    gap:1rem
}
.admin-user-main h3{
    margin:.4rem 0
}
.admin-role-badge{
    display:inline-block;
    padding:.25rem .55rem;
    border-radius:999px;
    font-size:.72rem;
    font-weight:800;
    text-transform:uppercase;
    background:#e8efe9
}
.admin-role-badge.admin{background:#e4e7ff;color:#343f9b}
.admin-role-badge.coach{background:#dff4e6;color:#176b3a}
.admin-role-badge.parent{background:#fff0d7;color:#8a5600}
.admin-user-status{
    display:grid;
    align-content:start;
    justify-items:end;
    gap:.4rem
}
.status-pill{
    display:inline-block;
    padding:.25rem .55rem;
    border-radius:999px;
    font-size:.78rem;
    font-weight:750
}
.status-pill.active{background:#dff4e6;color:#176b3a}
.status-pill.pending{background:#fff0d7;color:#8a5600}
.status-pill.suspended{background:#ffe1e1;color:#9a2020}
.admin-membership-list{
    display:flex;
    flex-wrap:wrap;
    gap:.45rem;
    margin:.8rem 0
}
.admin-membership-list span{
    padding:.35rem .55rem;
    border-radius:8px;
    background:#f1f5f2;
    font-size:.86rem
}
.admin-card-actions{
    margin-top:.8rem;
    margin-bottom:0
}
.admin-team-card{
    display:grid;
    grid-template-columns:1fr auto auto;
    gap:1rem;
    align-items:center
}
.admin-team-counts{
    display:grid;
    gap:.35rem;
    color:#617267;
    font-size:.88rem
}
@media(max-width:750px){
    .admin-summary-grid{
        grid-template-columns:1fr
    }
    .admin-filter-form{
        grid-template-columns:1fr
    }
    .admin-user-main{
        flex-direction:column
    }
    .admin-user-status{
        justify-items:start
    }
    .admin-team-card{
        grid-template-columns:1fr
    }
}

.parent-alert-banner{
    display:flex;
    align-items:center;
    gap:.8rem;
    margin-bottom:1rem;
    padding:1rem;
    border:2px solid #9f1414;
    border-radius:14px;
    background:#d92727;
    color:#fff;
    text-decoration:none;
    box-shadow:0 5px 18px #8d000044
}
.parent-alert-banner:hover{
    background:#bd1e1e
}
.parent-alert-banner small{
    display:block;
    margin-top:.2rem;
    color:#fff
}
.parent-alert-icon{
    display:grid;
    place-items:center;
    flex:0 0 42px;
    width:42px;
    height:42px;
    border-radius:50%;
    background:#fff;
    color:#c51f1f;
    font-size:1.45rem;
    font-weight:900
}
.admin-area-menu{
    margin-bottom:1rem
}
.admin-area-menu h2{
    margin-top:0
}
.team-brand-header{
    display:flex;
    align-items:center;
    gap:1rem;
    margin-bottom:1rem;
    padding:1rem;
    border:3px solid var(--team-primary);
    border-radius:14px;
    background:#ffffff;
    color:var(--team-primary);
    box-shadow:0 4px 14px #00000012
}
.team-brand-logo{
    width:76px;
    height:76px;
    border-radius:14px;
    object-fit:contain;
    background:#fff;
    border:1px solid #d9e3dc
}
.team-brand-name{
    font-size:1.5rem;
    font-weight:900
}
.team-brand-subtitle{
    margin-top:.2rem;
    font-weight:700;
    opacity:.8
}
.team-logo-admin-preview{
    display:flex;
    align-items:center;
    gap:1rem;
    padding:.8rem;
    border:1px solid #d9e3dc;
    border-radius:10px;
    background:#f7faf8
}
.team-logo-admin-preview img{
    width:100px;
    height:100px;
    object-fit:contain;
    border-radius:10px;
    background:#fff
}
.admin-team-brand-row{
    display:flex;
    align-items:center;
    gap:.8rem;
    padding:.7rem;
    border-left:6px solid var(--team-primary);
    border-radius:10px;
    background:#ffffff;
    color:var(--team-primary)
}
.admin-team-logo{
    width:64px;
    height:64px;
    border-radius:10px;
    object-fit:contain;
    background:#fff;
    border:1px solid #d9e3dc
}
@media(max-width:650px){
    .team-brand-logo{
        width:60px;
        height:60px
    }
    .team-brand-name{
        font-size:1.25rem
    }
}

.admin-direct-url{
    display:grid;
    gap:.4rem;
    margin-bottom:1rem
}
.admin-direct-url code{
    display:block;
    padding:.7rem;
    border-radius:8px;
    background:#f2f5f3;
    overflow-wrap:anywhere
}

.admin-login-body{
    min-height:100vh;
    display:grid;
    align-items:center;
    background:#eef3ef
}
.admin-login-container{
    padding-top:2rem;
    padding-bottom:2rem
}
.admin-login-card{
    padding:1.4rem
}
.admin-login-heading{
    display:flex;
    align-items:center;
    gap:1rem;
    margin-bottom:1.2rem
}
.admin-login-heading h1{
    margin:0
}
.admin-login-heading p{
    margin:.25rem 0 0;
    color:#617267
}
.admin-login-lock{
    display:grid;
    place-items:center;
    width:58px;
    height:58px;
    flex:0 0 58px;
    border-radius:14px;
    background:#176b3a;
    font-size:1.7rem
}
.admin-login-back{
    margin:1rem 0 0;
    text-align:center
}



:root{
    --team-primary:#176b3a;
    --team-primary-text:#ffffff
}











.team-brand-header{
    color:#162019
}
.team-brand-name,
.team-brand-subtitle{
    color:inherit
}


/* Version 18: compact team logos */
.topbar-team-logo{
    width:32px !important;
    height:32px !important;
    max-width:32px !important;
    max-height:32px !important;
    flex:0 0 32px;
    object-fit:contain;
    padding:2px;
    border-radius:7px
}
.team-brand-logo{
    width:52px !important;
    height:52px !important;
    max-width:52px !important;
    max-height:52px !important;
    flex:0 0 52px;
    object-fit:contain;
    padding:3px;
    border-radius:10px
}
.admin-team-logo{
    width:48px !important;
    height:48px !important;
    max-width:48px !important;
    max-height:48px !important;
    flex:0 0 48px;
    object-fit:contain
}
.team-logo-admin-preview img{
    width:80px !important;
    height:80px !important;
    max-width:80px !important;
    max-height:80px !important;
    object-fit:contain
}
.team-brand-header{
    min-height:auto;
    padding:.75rem
}
@media(max-width:650px){
    .topbar-team-logo{
        width:28px !important;
        height:28px !important;
        max-width:28px !important;
        max-height:28px !important;
        flex-basis:28px
    }
    .team-brand-logo{
        width:44px !important;
        height:44px !important;
        max-width:44px !important;
        max-height:44px !important;
        flex-basis:44px
    }
}


/* Version 19: team colors only affect header and buttons */
.team-themed-app .topbar{
    background:var(--team-primary);
    color:var(--team-primary-text)
}
.team-themed-app .topbar a,
.team-themed-app .brand{
    color:var(--team-primary-text)
}
.team-themed-app button,
.team-themed-app .button{
    background:var(--team-primary);
    border-color:var(--team-primary);
    color:var(--team-primary-text)
}
.team-themed-app .button.secondary{
    background:#ffffff;
    border-color:var(--team-primary);
    color:var(--team-primary)
}
.team-themed-app{
    background:#f4f7f5;
    color:#162019
}
.team-themed-app .card{
    background:#ffffff;
    color:#162019;
    border-color:#d9e3dc
}
.team-themed-app h1,
.team-themed-app h2,
.team-themed-app h3{
    color:#162019
}
.team-themed-app input,
.team-themed-app select,
.team-themed-app textarea{
    background:#ffffff;
    color:#111111
}
.team-themed-app .latest-parent-comment,
.team-themed-app .comment,
.team-themed-app .no-parent-comments{
    background:#f7faf8;
    color:#111111
}
.team-themed-app .document-link,
.team-themed-app .coach-comments-collapse summary{
    color:#176b3a
}
.team-brand-header{
    background:#ffffff;
    color:#162019;
    border-color:#d9e3dc
}
.team-brand-name,
.team-brand-subtitle{
    color:#162019
}


/* Version 21: team font color and live preview */
input[type="color"]{
    width:100%;
    min-height:52px;
    padding:4px;
    border:2px solid #bcc9c0;
    border-radius:10px;
    background:#ffffff;
    cursor:pointer
}
input[type="color"]::-webkit-color-swatch-wrapper{
    padding:2px
}
input[type="color"]::-webkit-color-swatch{
    border:1px solid #87958b;
    border-radius:7px
}
input[type="color"]::-moz-color-swatch{
    border:1px solid #87958b;
    border-radius:7px
}
.team-color-preview{
    --preview-primary:#176b3a;
    --preview-font:#ffffff;
    display:grid;
    gap:.8rem;
    padding:1rem;
    border:2px solid #d3ddd6;
    border-radius:12px;
    background:#ffffff
}
.team-color-preview-header{
    padding:1rem;
    border-radius:9px;
    background:var(--preview-primary);
    color:var(--preview-font);
    font-weight:900;
    text-align:center
}
.team-color-preview-button{
    display:inline-block;
    width:auto;
    justify-self:start;
    margin:0;
    padding:.75rem 1rem;
    border:1px solid var(--preview-primary);
    border-radius:9px;
    background:var(--preview-primary) !important;
    color:var(--preview-font) !important;
    font-weight:800
}
.team-color-values{
    display:flex;
    flex-wrap:wrap;
    gap:.75rem 1.25rem;
    color:#26332a;
    font-size:.92rem
}
.team-color-values code{
    padding:.15rem .35rem;
    border-radius:5px;
    background:#f0f3f1;
    color:#111111
}


/* Version 22: align topbar team logo and name */
.topbar .brand{
    display:flex;
    align-items:center;
    gap:.7rem;
    line-height:1;
    min-height:32px
}
.topbar .brand span{
    display:flex;
    align-items:center;
    line-height:1.05
}
.topbar-team-logo{
    display:block;
    vertical-align:middle
}
@media(max-width:650px){
    .topbar .brand{
        min-height:28px
    }
}


/* Version 24: coach remove post/event controls */
.coach-content-heading{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:1rem
}
.coach-content-heading h3{
    margin-top:0;
    margin-bottom:.5rem
}
.coach-delete-form{
    flex:0 0 auto;
    margin:0
}
.compact-delete-button{
    width:auto;
    padding:.5rem .7rem;
    white-space:nowrap;
    font-size:.88rem
}
.team-themed-app .compact-delete-button.danger{
    background:#a52222;
    border-color:#a52222;
    color:#ffffff
}
@media(max-width:650px){
    .coach-content-heading{
        align-items:stretch;
        flex-direction:column
    }
    .coach-delete-form{
        align-self:flex-start
    }
}


/* Version 25: mobile containment and coach replies */
html,
body{
    width:100%;
    max-width:100%;
    overflow-x:hidden
}
img,
video,
iframe{
    max-width:100%;
    height:auto
}
.container,
.card,
.notification-setup,
.team-brand-header,
.topbar,
.topbar nav,
.toolbar,
.inline,
.coach-content-heading{
    min-width:0;
    max-width:100%
}
.card,
.comment,
.latest-parent-comment,
.no-parent-comments{
    overflow-wrap:anywhere;
    word-break:break-word
}
input,
select,
textarea,
button,
.button{
    max-width:100%
}
.coach-reply-form{
    display:flex;
    align-items:stretch;
    gap:.5rem;
    margin-top:.7rem;
    max-width:100%
}
.coach-reply-form input[type="text"]{
    flex:1 1 auto;
    min-width:0;
    width:100%
}
.coach-reply-form button{
    flex:0 0 auto;
    width:auto
}
.notification-setup[hidden]{
    display:none !important
}
@media(max-width:650px){
    .topbar{
        width:100%;
        padding:.75rem
    }
    .topbar nav{
        width:100%;
        gap:.45rem
    }
    .topbar nav a{
        display:inline-block;
        max-width:100%;
        overflow-wrap:anywhere
    }
    .container{
        width:100%;
        max-width:100%;
        padding:.65rem
    }
    .card{
        width:100%;
        padding:.8rem
    }
    .toolbar,
    .inline,
    .notification-setup,
    .coach-reply-form{
        width:100%;
        flex-wrap:wrap
    }
    .toolbar > *,
    .inline > *,
    .notification-buttons > *{
        min-width:0
    }
    .coach-reply-form input[type="text"]{
        flex:1 1 100%
    }
    .coach-reply-form button{
        width:100%
    }
}


/* Version 26: installed-app notification requirement */
.notification-setup[hidden]{
    display:none !important
}
.notification-status strong{
    display:inline
}
@media(max-width:650px){
    .notification-setup{
        width:100%;
        max-width:100%;
        overflow:hidden
    }
    .notification-buttons,
    .notification-buttons button{
        width:100%
    }
}


/* Version 27: visible mobile Home Screen instructions */
.notification-status{
    line-height:1.45
}
.notification-status strong{
    font-size:1.02rem
}
@media(max-width:650px){
    .notification-status{
        width:100%;
        padding:.7rem;
        border-radius:9px;
        background:#fff7d6;
        color:#302500
    }
}


/* Version 28: clickable map addresses */
.map-address-link{
    display:inline-flex;
    align-items:center;
    flex-wrap:wrap;
    gap:.4rem;
    max-width:100%;
    color:#176b3a;
    font-weight:750;
    text-decoration:underline;
    overflow-wrap:anywhere
}
.map-link-label{
    display:inline-block;
    padding:.15rem .4rem;
    border-radius:999px;
    background:#eef5f0;
    color:#176b3a;
    font-size:.72rem;
    font-weight:800;
    text-decoration:none
}
.event-location-link{
    margin-top:.2rem
}