/*
  ----------------------------------------
  Admin (superadmin shared layout)
  ----------------------------------------
*/

@layer styles {
    .admin {
        /* Day-of tournament operation tabs */
        .nav-tabs {
            display: flex;
            gap: var(--space-2xs);
            border-bottom: var(--border) solid var(--light);
            margin-bottom: var(--space-md);

            .nav-tab-link {
                padding: var(--space-xs) var(--space-sm);
                color: var(--midtone);
                border-bottom: 2px solid transparent;
                margin-bottom: -1px;
                font-weight: 500;
                text-decoration: none;
                transition: color 200ms ease;

                &:hover {
                    color: var(--foreground);
                }

                &.active {
                    color: var(--foreground);
                    border-bottom-color: var(--brand-1);
                }
            }
        }
    }
}

/* ----------------------------------------
   Sidebar Navigation
   ---------------------------------------- */

@layer styles {
    .app-header__sidebar-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        padding: 0;
        border: 0;
        border-radius: var(--rounded-md);
        background: var(--white);
        color: var(--foreground);
        transition: background 150ms ease, color 150ms ease;
        outline: none;
        box-shadow: none;

        &:hover {
            background: var(--lighter);
            color: var(--brand-1);
        }

        &:focus,
        &:focus-visible,
        &:active {
            background: var(--white) !important;
            color: var(--foreground) !important;
            border-color: transparent !important;
            outline: none !important;
            box-shadow: none !important;
            -webkit-tap-highlight-color: transparent;
        }
    }

    .app-header__sidebar-toggle--mobile {
        display: none;
    }

    .app-header__sidebar-toggle-icon {
        display: none;
        line-height: 0;
    }

    body.admin:not(.admin--sidebar-mobile-open) .app-header__sidebar-toggle--mobile .app-header__sidebar-toggle-icon--menu,
    body.admin.admin--sidebar-mobile-open .app-header__sidebar-toggle--mobile .app-header__sidebar-toggle-icon--close {
        display: inline-flex;
    }

    .sidebar {
        width: 16rem;
        min-width: 16rem;
        flex-shrink: 0;
        background: var(--brand-1-900);
        border-right: var(--border) solid rgba(255, 255, 255, 0.08);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    /* Scrollable nav area.
       The scrollbar is styled for a dark surface: left unstyled, the browser
       draws its default light-grey track against --brand-1-900, which reads as a
       stripe down the sidebar edge. Matches .ui-tournament-list in ui.css. */
    .sidebar__nav-wrapper {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: rgb(255 255 255 / 0.18) transparent;
        padding: var(--space-sm) var(--space-sm) 0;
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
    }

    /* WebKit/Blink ignores scrollbar-color, so the same treatment again. */
    .sidebar__nav-wrapper::-webkit-scrollbar {
        width: 0.35rem;
    }

    .sidebar__nav-wrapper::-webkit-scrollbar-track {
        background: transparent;
    }

    .sidebar__nav-wrapper::-webkit-scrollbar-thumb {
        border-radius: var(--rounded-full);
        background: rgb(255 255 255 / 0.18);
    }

    .sidebar__nav-wrapper:hover::-webkit-scrollbar-thumb {
        background: rgb(255 255 255 / 0.3);
    }

    /* Group of related nav items (with optional section label) */
    .sidebar__nav-group {
        display: flex;
        flex-direction: column;
        gap: var(--space-3xs);
    }

    .sidebar__nav-divider {
        width: 100%;
        margin: calc(var(--space-xs) * -1) 0;
        border: 0;
        border-top: 1px solid rgb(255 255 255 / 0.1);
    }

    /* Reset list styles for nav item lists */
    .sidebar__nav-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: var(--space-3xs);
    }

    /* Section label above a nav group */
    .sidebar__section-label {
        display: block;
        font-size: var(--text-sm);
        font-weight: 600;
        line-height: 1.5;
        color: var(--brand-3-light);
        padding: 0 var(--space-xs) var(--space-3xs);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* Individual nav link */
    .sidebar__nav-item {
        display: flex;
        align-items: center;
        padding: 0 var(--space-sm);
        gap: var(--space-2xs);
        height: 3.375rem;
        width: 100%;
        min-width: 0;
        border-radius: var(--rounded-lg);
        text-decoration: none;
        color: var(--brand-3-light);
        font-size: 0.9375rem;
        font-weight: 500;
        line-height: 1.5;
        white-space: nowrap;
        transition: background 150ms ease, color 150ms ease;

        svg {
            width: 1.5rem;
            height: 1.5rem;
            flex-shrink: 0;
        }

        &:hover {
            background: var(--brand-1);
            color: var(--white);
        }

        &.active {
            background: var(--brand-1);
            color: var(--white);
        }
    }

    /* Stretches to fill remaining horizontal space */
    .sidebar__nav-label {
        flex: 1;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Count/notification badge beside a nav label */
    .sidebar__nav-badge {
        display: inline-flex;
        align-items: center;
        padding: var(--space-3xs) var(--space-2xs);
        background: var(--brand-3);
        border-radius: var(--rounded-full);
        font-size: var(--text-sm);
        font-weight: 500;
        color: var(--white);
        line-height: 1;
        flex-shrink: 0;
    }

    /* Pinned footer at bottom of sidebar */
    .sidebar__footer {
        padding: var(--space-sm);
        flex-shrink: 0;
    }

    @media (max-width: 56rem) { /* --bp-lg */
        .app-header__sidebar-toggle--mobile {
            display: inline-flex;
        }

        body.admin.admin--sidebar-mobile-open {
            overflow: hidden;
        }

        .sidebar {
            position: fixed;
            top: var(--height-lg);
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 95;
            width: 100%;
            min-width: 0;
            border-right: 0;
            transform: translateX(-100%);
            visibility: hidden;
            pointer-events: none;
            transition:
                transform 150ms ease,
                visibility 0s 150ms;
        }

        body.admin.admin--sidebar-mobile-open .sidebar {
            transform: translateX(0);
            visibility: visible;
            pointer-events: auto;
            transition:
                transform 150ms ease,
                visibility 0s 0s;
        }
    }
}

/* ----------------------------------------
   Internal shell polish
   ==========================================
   Brings the authenticated pages in line with the marketing look. Every rule is
   scoped to `.admin`, so the public/marketing pages (which share .card,
   .ui-button, and the heading tags) are left exactly as they are.
   ---------------------------------------- */

@layer styles {
    /* ── Page titles ─────────────────────────────────────────────────────────
       The marketing "punch" is the condensed Rajdhani display face, uppercase
       with tight leading. Internal page titles live in `.crud-header`, so lift
       them to the same treatment — one rule restyles the top-of-page heading on
       every admin/manage/superadmin/account screen. */
    .admin .crud-header h2,
    .admin .crud-header h3 {
        font-family: var(--font-display);
        /* Explicit fluid size — the same scale marketing content-page titles use
           (--text-2xl is tuned for Inter and renders small/narrow in the
           condensed Rajdhani face). */
        font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem);
        font-weight: 700;
        line-height: 1;          /* condensed display face wants tight leading */
        letter-spacing: 0;       /* Rajdhani is already condensed — no tracking */
        text-transform: uppercase;
        color: var(--text-heading);
    }

    /* ── Cards ───────────────────────────────────────────────────────────────
       Softer (cooler) border + gentle blue-black elevation instead of the hard
       grey border and neutral shadow. Cards that are themselves links/buttons
       get the marketing hover-lift; static cards stay put. */
    .admin .card {
        border-color: var(--gray-200);
        box-shadow: var(--shadow-soft);
        transition:
            border-color 120ms ease,
            box-shadow 120ms ease,
            transform 120ms ease;
    }

    .admin a.card:hover,
    .admin button.card:hover {
        border-color: var(--brand-1-200);
        box-shadow: var(--shadow-soft-lg);
        transform: translateY(-1px);
    }

    /* ── Section heading ─────────────────────────────────────────────────────
       In-page section title (e.g. "Tournaments & Registrations") — the display
       face, uppercase, sized a step below the page title. */
    .ui-section-heading {
        margin: 0;
        font-family: var(--font-display);
        font-size: clamp(1.125rem, 1rem + 0.4vw, 1.5rem);
        font-weight: 700;
        line-height: 1.1;
        letter-spacing: 0.01em;
        text-transform: uppercase;
        color: var(--text-heading);
    }

    /* ── Season bar ──────────────────────────────────────────────────────────
       A light band that groups the season picker, standings link, and the
       "everything below reflects this season" note into one control strip. */
    .ui-season-bar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-md);
        padding: var(--space-sm) var(--space-md);
        background: var(--lighter);
        border-radius: var(--rounded-lg);
    }

    .ui-season-bar__picker {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        margin: 0;
    }

    .ui-season-bar__label {
        font-size: var(--text-sm);
        font-weight: 600;
        color: var(--text-body);
    }

    .ui-season-bar__divider {
        width: 1px;
        height: 2rem;
        background: var(--light);
    }

    .ui-season-bar__note {
        flex: 1 1 12rem;
        margin: 0;
        font-size: var(--text-sm);
        color: var(--midtone);
    }

    @media (max-width: 48rem) { /* --bp-md */
        .ui-season-bar__divider {
            display: none;
        }
    }

    /* ── Tournament action toolbar ───────────────────────────────────────────
       The row of actions above the registration list. It wraps (see the view),
       and the trailing group (Register Anglers / Edit / Lock) is pushed to the
       right of the row on wide screens. Once the row wraps on a phone that auto
       margin would strand the group against the right edge on its own line,
       out of alignment with the buttons above it, so drop the push there.
       This lives on a class rather than the `ml-auto` utility because Prewind
       is a later cascade layer and would win over any override here. */
    .tournament-toolbar__end {
        margin-left: auto;
    }

    /* 60rem, not the usual --bp-md: this row needs roughly 950px to fit on one
       line, so between --bp-md and here it wraps while the auto margin still
       applied, stranding the trailing group alone against the right edge. Drop
       the push wherever the row is too narrow to hold it on one line. */
    @media (max-width: 60rem) {
        .tournament-toolbar__end {
            margin-left: 0;
        }
    }
}

/*
  ----------------------------------------
  Division notice editor
  ----------------------------------------
  Director-facing "Alerts & News" composer on the manage division page.
  Card-shaped like the other manage sections, with the header, textarea and
  action row stacked.
*/

@layer styles {
    .ui-notice-editor {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
        padding: var(--space-md);
        border: 1px solid var(--light);
        border-radius: 0.5rem;
        background: var(--surface, #fff);
    }

    /* The base form rule caps forms at --max-w-form, which leaves the composer
       stranded at half width inside this full-width panel. The message is the
       whole point of the section, so let it fill. */
    .ui-notice-editor form:has(.ui-field) {
        max-width: 100%;
    }

    .ui-notice-editor .ui-field {
        width: 100%;
    }

    .ui-notice-editor__footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-md);
        flex-wrap: wrap;
    }

    /* button_to renders its own <form>; stop it adding a stray block margin
       that would knock the Clear button out of line with Publish. */
    .ui-notice-editor__footer form {
        margin: 0;
    }

    /* The char-counter row styles are scoped to the contact form, so the
       composer restates them here. */
    .ui-notice-editor .ui-char-counter {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--space-sm);
        margin: 0.25rem 0 0;
    }

    .ui-notice-editor .ui-char-counter__count {
        margin: 0;
        margin-left: auto;
        flex-shrink: 0;
        white-space: nowrap;
        font-size: var(--text-sm);
        color: var(--midtone);
        font-variant-numeric: tabular-nums;
    }

    .ui-notice-editor .ui-char-counter__count--maxed {
        color: var(--warning);
        font-weight: 700;
    }

    .ui-notice-editor .ui-char-counter__warning {
        margin: 0;
        flex: 1;
        min-width: 0;
        font-size: var(--text-sm);
        color: var(--warning);
        display: none; /* revealed by the char-counter controller at max length */
    }

    .ui-notice-editor .ui-char-counter__warning--visible {
        display: block;
    }

    @media (max-width: 48rem) { /* --bp-md */
        .ui-notice-editor__footer {
            align-items: stretch;
        }
    }
}