/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .6rem 1.15rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
    text-decoration: none;
    white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

.btn--primary { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.btn--primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; }

.btn--accent { background: var(--color-accent); border-color: var(--color-accent); color: #08331b; }
.btn--accent:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); color: #fff; }

.btn--outline { background: #fff; border-color: var(--color-border); color: var(--color-text); }
.btn--outline:hover { border-color: var(--color-primary); color: var(--color-primary-dark); }

.btn--outline-light { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.65); color: #fff; }
.btn--outline-light:hover { background: #fff; color: var(--color-secondary); border-color: #fff; }

.btn--ghost { background: transparent; color: var(--color-text); }
.btn--ghost:hover { background: var(--color-bg-muted); color: var(--color-heading); }

.btn--danger { background: var(--color-danger); border-color: var(--color-danger); color: #fff; }
.btn--danger:hover { background: #b93a3a; border-color: #b93a3a; color: #fff; }

/* Quieter destructive affordance — for a control that only reveals the real one.
   Text uses a darker red than --color-danger so it clears WCAG AA on white. */
.btn--outline-danger { background: #fff; border-color: var(--color-danger); color: #a32f2f; }
.btn--outline-danger:hover { background: var(--color-danger-soft); border-color: #b93a3a; color: #8f2828; }

.btn--sm { padding: .4rem .8rem; font-size: .85rem; }
.btn--lg { padding: .8rem 1.6rem; font-size: 1rem; }
.btn--block { display: flex; width: 100%; }

/* ---------- Badges ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .22rem .6rem;
    border-radius: var(--radius-pill);
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.5;
    background: var(--color-bg-muted);
    color: var(--color-text-muted);
    white-space: nowrap;
}
.badge--sport { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.badge--success { background: var(--color-success-soft); color: var(--color-success); }
.badge--warning { background: var(--color-warning-soft); color: var(--color-warning); }
.badge--danger { background: var(--color-danger-soft); color: var(--color-danger); }
.badge--neutral { background: var(--color-bg-muted); color: var(--color-text-muted); }
.badge--info { background: var(--color-slate-soft); color: var(--color-slate); }

/* ---------- Cards ---------- */
.card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.card__body { padding: 1.25rem; }
.card__header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border-soft);
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.card__footer { padding: 1rem 1.25rem; border-top: 1px solid var(--color-border-soft); }

/* ---------- Avatar ---------- */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-weight: 700;
    overflow: hidden;
    flex-shrink: 0;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--sm { width: 34px; height: 34px; font-size: .9rem; }
.avatar--lg { width: 96px; height: 96px; font-size: 2rem; }

/* ---------- Navbar ---------- */
.navbar {
    position: sticky; top: 0; z-index: 60;
    background: #fff;
    border-bottom: 1px solid var(--color-border);
}
.navbar__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 20px;
    height: var(--navbar-height);
    display: flex; align-items: center; gap: 1.5rem;
}
.navbar__brand {
    display: flex; align-items: center; gap: .55rem;
    font-size: 1.1rem; font-weight: 800; color: var(--color-heading);
    letter-spacing: -.01em;
}
.navbar__brand:hover { text-decoration: none; color: var(--color-heading); }
.navbar__brand-accent { color: var(--color-primary-dark); }
.navbar__logo { border-radius: 50%; }
/* The wordmark is one word-group, never a paragraph. Without nowrap, flex hands
   it whatever width is left and it breaks mid-name — measured at 375px it stacked
   into "Rec / Sports / Team". The bar is a fixed 68px, so that did not make it
   taller; the name spilled out of it and over the page below.
   Shrinking is handled separately, at the bottom of this file, and deliberately
   not here: min-width:0 applied at every width lets flex take the name in early,
   and it was clipping at 360 and 375 where the row still had room to spare. */
.navbar__brand > span { white-space: nowrap; }

/* margin-left:auto absorbs the free space after the brand, so the links sit
   right-aligned next to the user menu rather than beside the logo. */
.navbar__links { display: flex; align-items: center; gap: .35rem; margin-left: auto; }
.navbar__link {
    padding: .45rem .7rem;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-weight: 600; font-size: .92rem;
}
.navbar__link:hover { background: var(--color-bg-muted); color: var(--color-heading); text-decoration: none; }
.navbar__link.is-active { color: var(--color-primary-dark); background: var(--color-primary-soft); }

/* Unread-message count on the Messages link. Sized from a min-width plus even
   side padding so "3" is a circle and "9+" widens into a pill without the nav
   shifting. Uses the danger colour deliberately: this is the one nav item
   asking to be dealt with, and it should read that way at a glance. */
.navbar__badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.25rem; height: 1.25rem;
    margin-left: .35rem; padding: 0 .35rem;
    border-radius: 999px;
    background: var(--color-danger); color: #fff;
    font-size: .72rem; font-weight: 700; line-height: 1;
    vertical-align: middle;
}

.navbar__actions { display: flex; align-items: center; gap: .5rem; }

/* The signed-out Sign In / Sign Up pair. It lives inside .navbar__links so that
   it folds into the hamburger panel on a phone, which means on wide screens it
   needs the separation from the last nav link that navbar__inner's own gap used
   to provide. */
.navbar__auth { display: inline-flex; align-items: center; gap: .5rem; margin-left: 1.15rem; }

.navbar__toggle {
    display: none;
    margin-left: auto;
    flex-direction: column; gap: 4px;
    background: none; border: 0; padding: .5rem; cursor: pointer;
}
.navbar__toggle span { display: block; width: 22px; height: 2px; background: var(--color-heading); border-radius: 2px; }

/* ---------- Nav dropdown (Admin) ----------
   Styled to sit in the nav as one more link rather than as a button: the
   trigger also carries .navbar__link, so it inherits that padding, weight and
   active colour and lines up with Browse/Messages beside it. Only the caret and
   the reset of the button element's own chrome live here. */
.nav-menu { position: relative; }
.nav-menu__trigger {
    display: inline-flex; align-items: center; gap: .3rem;
    border: 0; background: none; cursor: pointer;
    font-family: inherit;
}
.nav-menu__caret {
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: .7;
}
.nav-menu__trigger[aria-expanded="true"] .nav-menu__caret { transform: rotate(180deg); }
/* Right-aligned, like the user menu beside it: Admin is the last link in the
   nav, so hanging the panel leftward from the trigger keeps it on screen at
   any width down to the mobile breakpoint. */
.nav-menu__dropdown {
    position: absolute; right: 0; top: calc(100% + 8px);
    min-width: 190px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: .4rem;
    z-index: 70;
}
.nav-menu__item {
    display: flex; align-items: center; justify-content: space-between; gap: .6rem;
    padding: .5rem .7rem;
    border-radius: var(--radius-sm);
    color: var(--color-text); font-size: .9rem; font-weight: 500;
}
.nav-menu__item:hover { background: var(--color-bg-muted); color: var(--color-heading); text-decoration: none; }
.nav-menu__divider { height: 1px; background: var(--color-border-soft); margin: .3rem .2rem; }
/* Count beside an item, not on the trigger: inside the open menu you are
   choosing where to go, so the number belongs on the row it describes. */
.nav-menu__count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.15rem; padding: 0 .3rem;
    border-radius: 999px;
    background: var(--color-bg-muted); color: var(--color-text-muted);
    font-size: .72rem; font-weight: 700; line-height: 1.35;
}
.nav-menu__count--danger { background: var(--color-danger); color: #fff; }

/* ---------- User menu ---------- */
.user-menu { position: relative; }
.user-menu__trigger { background: none; border: 0; padding: 0; cursor: pointer; border-radius: 50%; }
.user-menu__dropdown {
    position: absolute; right: 0; top: calc(100% + 8px);
    min-width: 220px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: .4rem;
    z-index: 70;
}
.user-menu__header {
    padding: .6rem .7rem .7rem;
    border-bottom: 1px solid var(--color-border-soft);
    margin-bottom: .3rem;
    display: flex; flex-direction: column; gap: .1rem;
}
.user-menu__header strong { color: var(--color-heading); font-size: .92rem; }
.user-menu__header span { color: var(--color-text-subtle); font-size: .8rem; word-break: break-all; }
.user-menu__item {
    display: block; width: 100%; text-align: left;
    padding: .5rem .7rem;
    border: 0; background: none;
    border-radius: var(--radius-sm);
    color: var(--color-text); font-size: .9rem; cursor: pointer;
}
.user-menu__item:hover { background: var(--color-bg-muted); color: var(--color-heading); text-decoration: none; }

/* ---------- Impersonation banner ----------
   Deliberately loud and not dismissible: an admin acting as someone else must
   never be able to forget it. Sticks directly under the navbar on every page. */
.impersonation-banner {
    position: sticky;
    top: var(--navbar-height);
    z-index: 59;
    background: #7a3d0a;
    color: #fff;
    border-bottom: 2px solid #5c2e07;
}
.impersonation-banner__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: .6rem 20px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
}
.impersonation-banner__text { font-size: .9rem; line-height: 1.4; }
.impersonation-banner__sub { opacity: .85; }
.impersonation-banner__stop {
    background: #fff;
    border-color: #fff;
    color: #7a3d0a;
    font-weight: 700;
}
.impersonation-banner__stop:hover { background: var(--color-warning-soft); border-color: var(--color-warning-soft); color: #5c2e07; }

@media (max-width: 560px) {
    .impersonation-banner__inner { flex-direction: column; align-items: flex-start; gap: .5rem; }
}

/* Below this the name genuinely does not fit and has to give.
   A signed-in bar needs 349px for brand, toggle and avatar; a signed-out one
   needs 291px, because the auth buttons now fold into the hamburger panel. So
   only the smallest phones — an iPhone SE at 320, a folded Galaxy at 280 — run
   out of room, and only while signed in. Letting the name ellipsis there beats
   the alternatives: nowrap alone would run it off the edge, and hiding it
   outright would take the wordmark off the bar on ordinary phones too.
   Scoped to this width on purpose. min-width:0 at every size lets flex start
   trimming the name long before it needs to — measured, it clipped at both 360
   and 375 while the row still had room. */
@media (max-width: 340px) {
    .navbar__brand { min-width: 0; }
    .navbar__brand > span { overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- Forms ---------- */
.field { margin-bottom: 1.15rem; }
.field__label {
    display: block; margin-bottom: .35rem;
    font-weight: 600; font-size: .88rem; color: var(--color-heading);
}
.field__hint { display: block; margin-top: .35rem; font-size: .82rem; color: var(--color-text-subtle); }
.field__error { display: block; margin-top: .35rem; font-size: .82rem; color: var(--color-danger); }

.input, .select, .textarea {
    display: block; width: 100%;
    padding: .6rem .75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--color-text);
    font: inherit;
    transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.input.is-invalid, .select.is-invalid, .textarea.is-invalid { border-color: var(--color-danger); }
.input.is-valid { border-color: var(--color-accent-dark); }
.textarea { min-height: 110px; resize: vertical; }

.field-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 1rem; }

.checkbox { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .8rem; cursor: pointer; }
.checkbox input { margin-top: .25rem; width: 16px; height: 16px; accent-color: var(--color-primary); flex-shrink: 0; }
.checkbox span { font-size: .9rem; }

/* Toggle button groups (sports, availability days) */
.toggle-group { display: flex; flex-wrap: wrap; gap: .5rem; }
.toggle-btn {
    padding: .45rem .85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: #fff;
    color: var(--color-text-muted);
    font-size: .88rem; font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}
.toggle-btn:hover { border-color: var(--color-primary); color: var(--color-primary-dark); }
.toggle-btn[aria-pressed="true"] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* ---------- Flash messages ---------- */
.flash-stack {
    max-width: var(--container);
    margin: 1rem auto 0;
    padding: 0 20px;
    display: flex; flex-direction: column; gap: .5rem;
}
.flash {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .75rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid;
    font-size: .92rem;
}
.flash--success { background: var(--color-success-soft); border-color: #bde9cf; color: #14663a; }
.flash--error { background: var(--color-danger-soft); border-color: #f5c6c6; color: #9b2c2c; }
.flash--info { background: var(--color-primary-soft); border-color: var(--color-primary-border); color: #1b5e82; }
.flash__close { background: none; border: 0; font-size: 1.3rem; line-height: 1; cursor: pointer; color: inherit; opacity: .6; }
.flash__close:hover { opacity: 1; }

/* ---------- Dialogs ---------- */
dialog {
    border: 0;
    border-radius: var(--radius-lg);
    padding: 0;
    box-shadow: var(--shadow-lg);
    max-width: 560px;
    width: calc(100% - 2rem);
    color: var(--color-text);
}
dialog::backdrop { background: rgba(29, 40, 52, .45); }
.dialog__header { padding: 1.25rem 1.5rem .5rem; }
.dialog__header h2 { margin: 0; font-size: 1.2rem; }
.dialog__body { padding: .5rem 1.5rem 1rem; }
.dialog__footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--color-border-soft);
    display: flex; justify-content: flex-end; gap: .6rem;
    background: var(--color-bg-muted);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ---------- Empty state ---------- */
.empty-state {
    text-align: center;
    padding: 3.5rem 1.5rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-muted);
}
.empty-state__icon { font-size: 2.5rem; display: block; margin-bottom: .5rem; }
.empty-state h3 { margin-bottom: .35rem; }
.empty-state p { color: var(--color-text-muted); margin-bottom: 1.25rem; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th, .table td {
    padding: .75rem .85rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border-soft);
    vertical-align: middle;
    white-space: nowrap;
}
.table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-subtle); }
.table tbody tr:hover { background: var(--color-bg-muted); }

/* The users table carries 9 columns; cap the free-text ones so a long email
   can't push the row's action button out of view. Cells are nowrap already,
   so a max-width is all that's needed for ellipsis. Full values stay
   available via each cell's title attribute. */
.table--users th,
.table--users td { padding-left: .6rem; padding-right: .6rem; }
.table--users td:nth-child(1),
.table--users td:nth-child(3) { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Pagination ---------- */
.pagination { display: flex; justify-content: center; gap: .35rem; margin-top: 2.5rem; flex-wrap: wrap; }
.pagination a, .pagination span {
    padding: .45rem .8rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-size: .9rem; font-weight: 600;
}
.pagination a:hover { border-color: var(--color-primary); color: var(--color-primary-dark); text-decoration: none; }
.pagination .is-current { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.pagination .is-disabled { opacity: .45; }

/* ---------- Footer ---------- */
.footer { background: var(--color-secondary); color: #b7bec9; margin-top: 0; }
.footer__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 2.5rem 20px;
    display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center;
}
.footer__brand { display: flex; align-items: center; gap: .55rem; color: #fff; font-weight: 700; }
.footer__brand img { border-radius: 50%; }
.footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; }
.footer__links a { color: #b7bec9; font-size: .9rem; }
.footer__links a:hover { color: #fff; }
/* Quieter than the nav links above — present and reachable, not competing. */
.footer__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; font-size: .82rem; }
.footer__legal a { color: #8b95a3; }
.footer__legal a:hover { color: #fff; }
.footer__legal span { color: #6b7684; }
.footer__copy { font-size: .85rem; color: #8b95a3; margin: 0; }

@media (max-width: 880px) {
    .navbar__toggle { display: flex; }
    .navbar__links {
        display: none;
        position: absolute; top: var(--navbar-height); left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: #fff;
        border-bottom: 1px solid var(--color-border);
        padding: .5rem;
        box-shadow: var(--shadow-md);
    }
    .navbar__links.is-open { display: flex; }
    .navbar__link { padding: .7rem .8rem; }
    /* The nav is already a stacked panel here, so the Admin menu opens inline
       and pushes the rest down. Floating it over its own nav would put the
       items on top of the links they sit between, and on a short screen the
       bottom of the menu would land outside the panel entirely. */
    .nav-menu { width: 100%; }
    .nav-menu__trigger { width: 100%; justify-content: flex-start; }
    .nav-menu__caret { margin-left: auto; }
    .nav-menu__dropdown {
        position: static;
        border: 0; box-shadow: none;
        padding: 0 0 .3rem .8rem;
        min-width: 0;
    }
    .navbar__actions { margin-left: .5rem; }
    /* Stacked full width inside the panel, like the links above them, with a
       rule separating "where you can go" from "how you get in". */
    .navbar__auth {
        flex-direction: column; align-items: stretch;
        margin: .4rem 0 .2rem; padding-top: .6rem;
        border-top: 1px solid var(--color-border);
    }
    .navbar__auth .btn { justify-content: center; padding: .6rem .8rem; }
    /* btn--ghost is transparent, which reads as a button against the bar but as
       a stray line of centred text on the panel's white. Give it an edge so both
       choices look like things you can press, with Sign Up still the louder one. */
    .navbar__auth .btn--ghost { border-color: var(--color-border); }
    .field-row { grid-template-columns: 1fr; }
}