/* Styles for the app-sidebar component (components/sidebar.js).
   Every value is dialed through the sidebar tokens
   (design/sidebar.tokens.css) — restyle there, not here. */

.sidebar {
    display: flex;
    flex-direction: column;
    width: var(--sb-width);
    background: var(--sb-bg);
    border-right: 1px solid var(--sb-border);
    padding: 0 0 var(--space-4);
    flex-shrink: 0;
    min-height: 100vh;
    font-family: var(--sb-font);
    letter-spacing: var(--sb-tracking);
}

/* Brand block — an exact copy of the landing page's .brand
   (public/shared-header.js + homepage.css): 11px rounded dot in
   Courtio blue, 18px/500 wordmark. Height matches the topbar (56px)
   so the two rows read as one line across the top. */
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    user-select: none;
    flex-shrink: 0;
    height: 56px;
    margin-bottom: var(--space-2);
    padding: 0 calc(var(--sb-inset) + var(--sb-item-pad-x));
    font-family: "Helvetica Neue", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, sans-serif;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.025em;
    color: var(--color-brand-ink);
}

.sidebar-brand-dot {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    background: var(--color-brand);
}

.nav-group-label {
    padding: 0 calc(var(--sb-inset) + var(--sb-item-pad-x));
    margin: var(--space-5) 0 var(--space-1);
    font-size: var(--sb-label-size);
    font-weight: 600;
    letter-spacing: var(--sb-label-tracking);
    text-transform: uppercase;
    color: var(--sb-label-color);
}

/* The first group sits closer to the brand; later groups (e.g.
   Administration) get the full gap above. */
.sidebar-brand + .nav-group-label {
    margin-top: var(--space-4);
}

.nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sb-icon-gap);
    margin: var(--sb-item-gap) var(--sb-inset);
    padding: 0 var(--sb-item-pad-x);
    height: var(--sb-item-height);
    width: calc(100% - 2 * var(--sb-inset));
    border-radius: var(--sb-item-radius);
    border: 1px solid transparent;
    background: none;
    font-family: inherit;
    font-size: var(--sb-text-size);
    font-weight: var(--sb-text-weight);
    letter-spacing: inherit;
    color: var(--sb-text);
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.nav-item:hover {
    background: var(--sb-hover-bg);
    color: var(--sb-text-active);
}

.nav-item.active {
    background: var(--sb-active-bg);
    border-color: var(--sb-active-border);
    box-shadow: var(--sb-active-shadow);
    color: var(--sb-active-fg);
    font-weight: var(--sb-active-weight);
}

/* The one signature: a small brand accent bar on the rail edge,
   marking the active top-level item. */
.nav-item.active:not(.nav-sub-item)::before {
    content: '';
    position: absolute;
    left: calc(-1 * var(--sb-inset));
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 16px;
    border-radius: 0 3px 3px 0;
    background: var(--sb-accent);
}

/* Parents (items that expand a section) read slightly heavier. */
.nav-item.nav-parent {
    font-weight: var(--sb-parent-weight);
}

.nav-icon {
    font-size: var(--sb-icon-size);
    width: 18px;
    text-align: center;
    color: var(--sb-icon-color);
    transition: color 0.12s ease;
}

/* Sport glyph PrimeIcons doesn't have: a tennis ball, drawn as a CSS
   mask over currentColor so it colors exactly like the font icons. */
.nav-icon.icon-tennis-ball {
    height: 16px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M5 5.8c2.6 2.4 2.6 10 0 12.4'/%3E%3Cpath d='M19 5.8c-2.6 2.4-2.6 10 0 12.4'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M5 5.8c2.6 2.4 2.6 10 0 12.4'/%3E%3Cpath d='M19 5.8c-2.6 2.4-2.6 10 0 12.4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.nav-item.active .nav-icon {
    color: var(--sb-icon-active-color);
}

.nav-chevron {
    margin-left: auto;
    font-size: var(--text-sm);
    color: var(--sb-icon-color);
    transition: transform 0.2s;
}

.nav-chevron.open {
    transform: rotate(90deg);
}

/* Nested submenu: indent guide line running down the children, aligned
   under the parent's icon. */
.sub-nav {
    margin: 2px var(--sb-inset) var(--space-1) calc(var(--sb-inset) + var(--sb-item-pad-x) + 16px);
    padding-left: 10px;
    border-left: 1px solid var(--sb-guide-color);
}

.nav-item.nav-sub-item {
    margin: var(--sb-item-gap) 0;
    width: 100%;
    height: var(--sb-sub-item-height);
    font-size: var(--sb-sub-text-size);
    font-weight: var(--sb-text-weight);
}

/* Superadmin-only "New club" action, sitting between the brand and the
   first group. */
.sidebar-new-club.p-button {
    margin: 0 calc(var(--sb-inset) + var(--sb-item-pad-x)) var(--space-2);
    width: calc(100% - 2 * (var(--sb-inset) + var(--sb-item-pad-x)));
}

/* Mobile (≤768px): the rail becomes an off-canvas drawer over a
   backdrop, opened from the topbar's menu button; rows grow to touch
   targets. Desktop keeps the always-visible rail. */
.sidebar-backdrop {
    display: none;
}

@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        height: 100vh;
        min-height: 0;
        overflow-y: auto;
        z-index: 120;
        width: min(280px, 85vw);
        transform: translateX(-100%);
        transition: transform 0.2s ease;
    }

    .sidebar.open {
        transform: translateX(0);
        box-shadow: var(--shadow-2);
    }

    .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 110;
        background: var(--color-backdrop);
    }

    .nav-item {
        height: 44px;
    }

    .nav-item.nav-sub-item {
        height: 40px;
    }
}

/* Pinned to the rail's bottom (margin-top: auto in the flex column). */
.view-only-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: var(--space-4) var(--space-3) var(--space-1);
    margin-top: auto;
    padding: var(--space-2) var(--space-3);
    background: var(--sb-hover-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.35;
    color: var(--sb-text);
}