/* ─────────────────────────────────────────────────────────────────────────────
   ALL STAR WRESTLING NORTH — brand tokens
   Location: /assets/css/brand.css   (SHARED — /admin and /members both link this)

   Red + gold on warm-dark. These override the :root defaults shipped in
   admin.css, so this file must be linked AFTER admin.css.

   This is the single source of truth for the brand. Change a colour here and
   both the admin panel and the members portal follow — do not copy these
   values into a page, a module or a second stylesheet.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
    --brand-dark:    #16150f;
    --brand-mid:     #211e16;
    --brand-purple:  #2a2720;
    --brand-accent:  #e4181c;
    --brand-light:   #f5c518;
    --heading-color: #17150f;

    /* Topbar in brand red. Note admin.css sets #admin-topbar's background from
       var(--brand-dark), NOT var(--topbar-bg) — so this token alone changes
       nothing and the element is overridden directly further down. */
    --topbar-bg:     #e4181c;

    /* Page background a step darker than admin.css's #f1f5f8, so the tab strip
       and white panels read clearly against it. */
    --bg:            #dfe5ec;

    /* Darker again behind the tab strip so inactive tabs separate from the
       white panel the active one merges into. */
    --tabstrip-bg:   #c3cede;

    /* Darker steps for hover / active states. */
    --brand-accent-hover:  #c31417;
    --brand-accent-active: #a81114;
    --brand-accent-rgb:    228, 24, 28;
}

/* ─────────────────────────────────────────────────────────────────────────────
   BOOTSTRAP OVERRIDES

   Bootstrap ships its own blue (#0d6efd) and the panel uses stock Bootstrap
   components in places — Form::actions() emits .btn-primary, and the post
   generator's toast reads var(--bs-primary). Without these, Bootstrap blue and
   brand red end up on the same screen.

   Bootstrap 5.3 drives each button variant from its own --bs-btn-* custom
   properties, so setting --bs-primary alone does NOT recolour buttons. The
   .btn-primary block below is what actually does it.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
    --bs-primary:          #e4181c;
    --bs-primary-rgb:      228, 24, 28;
    --bs-link-color:       #e4181c;
    --bs-link-hover-color: #c31417;
    --bs-focus-ring-color: rgba(228, 24, 28, .25);
}

.btn-primary {
    --bs-btn-color:                 #fff;
    --bs-btn-bg:                    #e4181c;
    --bs-btn-border-color:          #e4181c;
    --bs-btn-hover-color:           #fff;
    --bs-btn-hover-bg:              #c31417;
    --bs-btn-hover-border-color:    #b81316;
    --bs-btn-focus-shadow-rgb:      228, 24, 28;
    --bs-btn-active-color:          #fff;
    --bs-btn-active-bg:             #a81114;
    --bs-btn-active-border-color:   #9d1013;
    --bs-btn-disabled-color:        #fff;
    --bs-btn-disabled-bg:           #e4181c;
    --bs-btn-disabled-border-color: #e4181c;
}

.btn-outline-primary {
    --bs-btn-color:                 #e4181c;
    --bs-btn-border-color:          #e4181c;
    --bs-btn-hover-color:           #fff;
    --bs-btn-hover-bg:              #e4181c;
    --bs-btn-hover-border-color:    #e4181c;
    --bs-btn-focus-shadow-rgb:      228, 24, 28;
    --bs-btn-active-color:          #fff;
    --bs-btn-active-bg:             #e4181c;
    --bs-btn-active-border-color:   #e4181c;
    --bs-btn-disabled-color:        #e4181c;
    --bs-btn-disabled-border-color: #e4181c;
}

/* Focus rings and checked states — Bootstrap hardcodes blue in these, so they
   have to be named explicitly rather than inheriting from --bs-primary. */
.form-control:focus,
.form-select:focus {
    border-color: rgba(228, 24, 28, .55);
    box-shadow: 0 0 0 .25rem rgba(228, 24, 28, .18);
}

.form-check-input:checked {
    background-color: #e4181c;
    border-color: #e4181c;
}

.form-check-input:focus {
    border-color: rgba(228, 24, 28, .55);
    box-shadow: 0 0 0 .25rem rgba(228, 24, 28, .18);
}

/* admin.css still carries Prime's purple in its own focus ring. */
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    box-shadow: 0 0 0 3px rgba(228, 24, 28, .12);
}

/* ─────────────────────────────────────────────────────────────────────────────
   TAB STRIP

   Bootstrap's nav-tabs are otherwise unstyled by admin.css, so everything here
   is a deliberate ASN choice rather than an override of something existing.
   ───────────────────────────────────────────────────────────────────────────── */

/* Tab labels use the standard body text colour — red on red-adjacent chrome
   was reading as a link rather than navigation. */
.nav-tabs .nav-link {
    color: var(--text);
    font-weight: 600;
}

.nav-tabs .nav-link:hover {
    color: var(--heading-color);
    border-color: transparent transparent var(--border);
}

.nav-tabs .nav-link.active {
    color: var(--heading-color);
}

/* The rule the tabs sit on runs edge to edge. #page-content-inner has 28px of
   horizontal padding, so the strip is pulled out by that much and given it
   back as padding — the tabs stay aligned with the content while the border
   reaches the window edges. */
#page-content-inner .nav-tabs {
    margin-left:  -28px;
    margin-right: -28px;
    padding-left:  28px;
    padding-right: 28px;
}

@media (max-width: 768px) {
    #page-content-inner .nav-tabs {
        margin-left:  -16px;
        margin-right: -16px;
        padding-left:  16px;
        padding-right: 16px;
    }
}

/* On a tabbed page the content area takes the tab colour, so the active tab
   merges into the panel below it, and the cards invert to the page background
   to stay distinct. :has() scopes this to pages that actually have tabs —
   everywhere else keeps white cards on a grey page.

   If a browser without :has() support ever matters, the fallback is simply the
   old white-card-on-grey look, not a broken layout. */
#page-content-inner:has(.nav-tabs) {
    background: var(--surface);
}

#page-content-inner:has(.nav-tabs) .card-admin,
#page-content-inner:has(.nav-tabs) .card {
    background: var(--bg);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Form action rows

   Form::actions() emits `<div class="mt-3 d-flex gap-2">`. Where a page puts
   that INSIDE a .form-grid it becomes a grid item and stretches to the height
   of the tallest cell in its row — which is what made the Lexicon Categories
   buttons full height. The markup has been corrected to place the row after the
   grid; this guards against it recurring on a page that gets it wrong.
   ───────────────────────────────────────────────────────────────────────────── */

.form-grid > .d-flex.gap-2 {
    align-items: start;
    align-self:  start;
}


/* ─────────────────────────────────────────────────────────────────────────────
   SIDEBAR ACTIVE LINKS

   admin.css sets these to var(--brand-accent) with !important on all three
   properties, so matching that specificity is required rather than optional.

   Gold picks up the logo; the label flips to near-black because white on
   #f5c518 fails contrast badly.
   ───────────────────────────────────────────────────────────────────────────── */

#accordian ul li a.active,
.nav-group-items li a.active {
    background:         var(--brand-light) !important;
    color:              #16150f !important;
    border-left-color:  var(--brand-light) !important;
    font-weight:        600;
}


/* ─────────────────────────────────────────────────────────────────────────────
   TOPBAR

   admin.css sets #admin-topbar's background to var(--brand-dark) directly, so
   the --topbar-bg token above is decorative — the element itself has to be
   restyled here.
   ───────────────────────────────────────────────────────────────────────────── */

#admin-topbar {
    background: var(--brand-accent);
    border-bottom: 1px solid rgba(0, 0, 0, .18);
}

#member-topbar {
    background: var(--brand-accent);
    border-bottom: 1px solid rgba(0, 0, 0, .18);
}


/* ─────────────────────────────────────────────────────────────────────────────
   TAB STRIP BACKGROUND

   The strip sits a shade darker than the page so inactive tabs read as tabs,
   while the active one stays white and joins the panel below it.
   ───────────────────────────────────────────────────────────────────────────── */

#page-content-inner .nav-tabs {
    background: var(--tabstrip-bg);
    padding-top: 10px;
    border-bottom-color: rgba(0, 0, 0, .12);
}

#page-content-inner .nav-tabs .nav-link {
    background: transparent;
    border-color: transparent;
}

#page-content-inner .nav-tabs .nav-link:hover {
    background: rgba(255, 255, 255, .45);
    border-color: transparent;
}

#page-content-inner .nav-tabs .nav-link.active {
    background: var(--surface);
    border-color: rgba(0, 0, 0, .12) rgba(0, 0, 0, .12) var(--surface);
}

/* ─────────────────────────────────────────────────────────────────────────────
   SIDEBAR ACTIVE LINK — full-bleed

   admin.css gives .nav-group-items li a a margin-left of 8px plus a 2px
   border-left, putting the text 34px in. The margin is what stops the active
   bar reaching the sidebar edge, so it is dropped and handed to padding
   instead — the bar goes full width, the label does not move.
   ───────────────────────────────────────────────────────────────────────────── */

.nav-group-items li a.active {
    margin-left: 0 !important;
    padding-left: 32px !important;
    border-left-width: 2px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SCROLLBARS

   Always visible — an overlay scrollbar that fades out makes a long nav feel
   like it has no more content. Kept narrow and low-contrast so it reads as a
   hint rather than furniture. Two syntaxes: the standard properties for
   Firefox, the ::-webkit- pseudo-elements for Chrome, Edge and Safari.
   ───────────────────────────────────────────────────────────────────────────── */

#sidebar-wrapper {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .22) transparent;
}

#sidebar-wrapper::-webkit-scrollbar { width: 8px; }
#sidebar-wrapper::-webkit-scrollbar-track { background: transparent; }
#sidebar-wrapper::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .18);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: content-box;
}
#sidebar-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, .34);
    background-clip: content-box;
}

/* Light surfaces — the content column and any scrollable panel within it. */
#page-content-wrapper,
#page-content-inner,
.table-wrap {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, .22) transparent;
}

#page-content-wrapper::-webkit-scrollbar,
#page-content-inner::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar { width: 8px; height: 8px; }

#page-content-wrapper::-webkit-scrollbar-track,
#page-content-inner::-webkit-scrollbar-track,
.table-wrap::-webkit-scrollbar-track { background: transparent; }

#page-content-wrapper::-webkit-scrollbar-thumb,
#page-content-inner::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .18);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: content-box;
}

#page-content-wrapper::-webkit-scrollbar-thumb:hover,
#page-content-inner::-webkit-scrollbar-thumb:hover,
.table-wrap::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, .32);
    background-clip: content-box;
}