/* PlayCompete — "Clean Sport" applied to the ADMIN.
   ---------------------------------------------------------------------------
   pc-theme.css scopes the palette to body.pc-public, on the reasoning that an
   organizer working in the admin keeps the interface they know. That reasoning
   has been overtaken: the admin is the product organizers actually live in,
   and stock Tabler made every screen look like a settings page for something
   else. This file applies the same palette there.

   Same variables, same hexes. A second palette that drifts from the first is
   worse than no palette.

   Loaded last, and scoped to body:not(.pc-public) — the layout adds pc-public
   to every page except /admin/*, so this needs no new body class and no view
   changes. Everything below hangs off classes the admin markup already has. */

body:not(.pc-public) {
    --pc-bg:        #F8FAFA;
    --pc-surface:   #FFFFFF;
    --pc-hero:      #EDF5F5;   /* tinted panels, active nav, icon chips */
    --pc-teal:      #087F83;
    --pc-teal-dark: #066a6d;
    --pc-navy:      #123B4A;   /* headings */
    --pc-text:      #4C6068;   /* body copy */
    --pc-border:    #D9E3E5;
    --pc-muted:     #7A8E96;

    /* One radius and one shadow, used everywhere. The bland look was partly
       colour, but mostly that nothing agreed: cards at 4px, buttons at 2px,
       inputs square, and no elevation anywhere to separate a panel from the
       page behind it. */
    --pc-radius:    14px;
    --pc-radius-sm: 9px;

    /* Chip width plus its gutter. Written once because three rules depend on
       the same number: the chip itself, the subtitle's indent, and the
       subtitle's width. Retune the chip here and the header stays aligned. */
    --pc-chip-size: 2.1rem;
    --pc-chip-gap:  .7rem;
    --pc-chip-span: 2.8rem;
    --pc-shadow:    0 1px 2px rgba(18, 59, 74, .04), 0 6px 16px -8px rgba(18, 59, 74, .12);

    background-color: var(--pc-bg);
    color: var(--pc-text);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Tabler paints .page itself, which would cover the body colour. */
body:not(.pc-public) .page {
    background-color: transparent;
}

/* ── Type ────────────────────────────────────────────────────────────────────
   Headings carry the font; body copy stays at normal weight so the page does
   not read as all-caps-shouting. Navy rather than black: pure black against a
   soft background is the single biggest "unstyled" tell. */
body:not(.pc-public) h1,
body:not(.pc-public) h2,
body:not(.pc-public) h3,
body:not(.pc-public) h4,
body:not(.pc-public) .card-title,
body:not(.pc-public) .page-title {
    color: var(--pc-navy);
    font-weight: 700;
    letter-spacing: -.012em;
}

body:not(.pc-public) .text-muted {
    color: var(--pc-muted) !important;
}

/* ── Cards ───────────────────────────────────────────────────────────────────
   The header gets its own tint rather than being white-on-white, which is what
   made a page of cards read as one undifferentiated sheet. */
body:not(.pc-public) .card {
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius);
    box-shadow: var(--pc-shadow);
    background-color: var(--pc-surface);
}

body:not(.pc-public) .card-header {
    background-color: var(--pc-surface);
    border-bottom: 1px solid var(--pc-border);
    border-radius: var(--pc-radius) var(--pc-radius) 0 0;
    padding: .9rem 1.15rem;

    /* Centred, not top-aligned. On a title-only header - which is 309 of the
       314 - flex-start left the chip and the title sitting on different
       baselines with the chip slightly high. align-items works per flex LINE,
       so when a subtitle is present it wraps to its own line and this still
       centres the chip against the title rather than against both. */
    align-items: center;
}

/* The title carries the weight the mockup has. Most of these headers have no
   subtitle - only 5 of 114 admin views wrote one - so the title is doing the
   whole job and should look like it. */
body:not(.pc-public) .card-header .card-title {
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 0;
    letter-spacing: -.014em;
}

/* Title and subtitle as one block beside the chip, rather than the subtitle
   wrapping underneath the chip as a third flex item. */
body:not(.pc-public) .card-header > .card-title {
    flex: 1 1 auto;
    min-width: 0;
}

/* Pairs with the wrap rule in pc-overrides.css, which puts the subtitle on its
   own line at width:100%.

   On its own line it starts at the far left, which is under the chip rather
   than under the title — the two lines of the header no longer share an edge.
   Indenting by the chip's full width plus its gutter lines them up, and the
   width comes down by the same amount so the line still ends where it did. */
body:not(.pc-public) .card-header > .card-subtitle {
    color: var(--pc-muted);
    font-weight: 400;
    margin-left: var(--pc-chip-span);
    width: calc(100% - var(--pc-chip-span));
}

body:not(.pc-public) .card-header.pc-no-chip > .card-subtitle {
    margin-left: 0;
    width: 100%;
}

/* ── The icon chip, on every card header ─────────────────────────────────────
   There are 314 card headers across 114 admin views. Editing them all is not
   possible on a host where files go up one at a time, so the chip is drawn
   here with ::before and appears everywhere at once.

   The default mark is three bars drawn with gradients rather than an emoji.
   An emoji would have to MEAN something, and one icon standing for a payments
   card and a sponsors card and a divisions card means nothing — it reads as a
   mistake. A neutral section mark reads as design.

   A view that wants a real icon says so:  <div class="card-header" data-ico="🌐">
   and the glyph replaces the bars. No other change to the markup. */
body:not(.pc-public) .card-header:not([data-chip])::before {
    content: "";
    flex: 0 0 auto;
    width: var(--pc-chip-size);
    height: var(--pc-chip-size);
    margin-right: var(--pc-chip-gap);
    border-radius: var(--pc-radius-sm);
    background-color: var(--pc-hero);
    background-image:
        linear-gradient(var(--pc-teal), var(--pc-teal)),
        linear-gradient(var(--pc-teal), var(--pc-teal)),
        linear-gradient(var(--pc-teal), var(--pc-teal));
    background-size: .62rem 2px, .62rem 2px, .62rem 2px;
    background-position: 50% calc(50% - .3rem), 50% 50%, 50% calc(50% + .3rem);
    background-repeat: no-repeat;
}

/* Once pc-admin-icons.js has inserted a real <i class="ti ti-…">, the drawn
   bars must go or the header carries two marks. */
body:not(.pc-public) .card-header[data-chip]::before {
    content: none;
}

/* Some headers are flex rows with a button pushed to the right by
   justify-content:space-between. The chip must not be treated as one of the
   two things being spaced apart, or the title drifts into the middle. */
body:not(.pc-public) .card-header.justify-content-between {
    justify-content: flex-start;
}

body:not(.pc-public) .card-header.justify-content-between > :last-child {
    margin-left: auto;
}

/* Opt out for a header where the chip is wrong - a table toolbar, say. */
body:not(.pc-public) .card-header.pc-no-chip::before {
    content: none;
}

/* The chip the script inserts, and the hand-placed version for a header that
   wants it somewhere other than hard left. */
body:not(.pc-public) .pc-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    margin-right: .65rem;
    border-radius: var(--pc-radius-sm);
    background-color: var(--pc-hero);
    color: var(--pc-teal);
    font-size: 1.15rem;
    line-height: 1;
    flex: 0 0 auto;
}

body:not(.pc-public) .pc-chip .ti {
    font-size: 1.15rem;
    line-height: 1;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────────
   Panel, not a bare list. The active item is a filled pill rather than a
   colour change, because at a glance "where am I" should be answerable by
   shape, not by noticing that one of nine labels is a slightly different
   grey. */
body:not(.pc-public) .pc-sidenav {
    background-color: var(--pc-surface);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius);
    box-shadow: var(--pc-shadow);
    padding: .75rem .6rem;
}

body:not(.pc-public) .pc-sidenav .pc-group-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--pc-muted);
    padding: .9rem .65rem .3rem;
}

body:not(.pc-public) .pc-sidenav .pc-group-label:first-child {
    padding-top: .25rem;
}

body:not(.pc-public) .pc-sidenav .nav-link {
    display: flex;
    align-items: center;
    gap: .2rem;
    border-radius: var(--pc-radius-sm);
    padding: .5rem .65rem;
    margin-bottom: .1rem;
    color: var(--pc-text);
    font-weight: 500;
    font-size: .925rem;
    transition: background-color .12s ease, color .12s ease;
}

body:not(.pc-public) .pc-sidenav .nav-link:hover {
    background-color: var(--pc-bg);
    color: var(--pc-navy);
}

/* !important, reluctantly, and only here.

   Both side-nav partials carry an inline <style> of their own containing
       .pc-sidenav .nav-link.active { background:#023F50; color:#fff !important; }
   which was readable while the pill was dark navy. Repainting the pill pale
   without also winning the colour left white text on a pale background.

   Overriding from here rather than editing the two partials keeps the
   restyle to one file, and the sub-nav in _season-side-nav already uses a
   pale pill with dark text, so this makes the two levels agree. */
body:not(.pc-public) .pc-sidenav .nav-link.active {
    background-color: var(--pc-hero);
    color: var(--pc-teal) !important;
    font-weight: 600;
    box-shadow: none;
}

/* The step/pending counters sit inside an active row. The same partial paints
   them white-on-navy, which is invisible once the row behind them is pale. */
body:not(.pc-public) .pc-sidenav .nav-link.active .pc-step,
body:not(.pc-public) .pc-sidenav .nav-link.active .pc-pending {
    background: var(--pc-teal);
    color: #fff;
}

/* The glyphs are emoji, which ignore `color`. Sizing and a steady gutter are
   what actually make the column of labels line up. */
body:not(.pc-public) .pc-sidenav .pc-ico {
    width: 1.5rem;
    font-size: .95rem;
    text-align: center;
    flex: 0 0 auto;
}

body:not(.pc-public) .pc-collapse-btn {
    color: var(--pc-muted);
    font-size: .8rem;
    text-decoration: none;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
body:not(.pc-public) .btn {
    border-radius: var(--pc-radius-sm);
    font-weight: 600;
}

body:not(.pc-public) .btn-primary {
    background-color: var(--pc-teal);
    border-color: var(--pc-teal);
}

body:not(.pc-public) .btn-primary:hover,
body:not(.pc-public) .btn-primary:focus,
body:not(.pc-public) .btn-primary:active {
    background-color: var(--pc-teal-dark);
    border-color: var(--pc-teal-dark);
}

body:not(.pc-public) .btn-outline-primary {
    color: var(--pc-teal);
    border-color: var(--pc-teal);
}

body:not(.pc-public) .btn-outline-primary:hover {
    background-color: var(--pc-teal);
    border-color: var(--pc-teal);
}

/* Links, but NOT links wearing a button.

   Written as a bare `a` first, which recoloured every <a class="btn"> too: a
   filled teal button got teal text on teal, and the grey Manage button got
   teal text on grey. Buttons carry their own foreground and must keep it. */
body:not(.pc-public) a:not(.btn) {
    color: var(--pc-teal);
}

/* Said outright rather than inherited, so no future link rule can take the
   label off a filled button again. */
body:not(.pc-public) .btn-primary,
body:not(.pc-public) .btn-primary:hover,
body:not(.pc-public) .btn-primary:focus,
body:not(.pc-public) .btn-primary:active,
body:not(.pc-public) .btn-secondary,
body:not(.pc-public) .btn-secondary:hover,
body:not(.pc-public) .btn-success,
body:not(.pc-public) .btn-danger,
body:not(.pc-public) .btn-dark {
    color: #fff;
}

body:not(.pc-public) .btn-outline-primary:hover,
body:not(.pc-public) .btn-outline-secondary:hover,
body:not(.pc-public) .btn-outline-danger:hover,
body:not(.pc-public) .btn-outline-success:hover {
    color: #fff;
}

/* ── Forms ───────────────────────────────────────────────────────────────────
   The focus ring is the one place the brand colour has to appear, otherwise
   the field people are typing in glows Bootstrap blue in an otherwise teal
   interface. */
body:not(.pc-public) .form-control,
body:not(.pc-public) .form-select {
    border-radius: var(--pc-radius-sm);
    border-color: var(--pc-border);
}

body:not(.pc-public) .form-control:focus,
body:not(.pc-public) .form-select:focus {
    border-color: var(--pc-teal);
    box-shadow: 0 0 0 .2rem rgba(8, 127, 131, .14);
}

body:not(.pc-public) .form-check-input:checked {
    background-color: var(--pc-teal);
    border-color: var(--pc-teal);
}

body:not(.pc-public) .form-label {
    color: var(--pc-navy);
    font-weight: 600;
    font-size: .875rem;
}

/* ── Tables ──────────────────────────────────────────────────────────────── */
body:not(.pc-public) .table thead th {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--pc-muted);
    border-bottom: 1px solid var(--pc-border);
}

/* ── Badges and alerts ───────────────────────────────────────────────────── */
body:not(.pc-public) .badge {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: .01em;
}

body:not(.pc-public) .alert {
    border-radius: var(--pc-radius-sm);
    border: 1px solid var(--pc-border);
}


/* ── Sidebar width ───────────────────────────────────────────────────────────
   Bootstrap's col-lg-3 / col-xl-2 gave the nav a share of the grid rather than
   a width, so it was ~25% of the window at 1200px and ~17% at 1900px — wide
   and narrow on the same site. 245px is a width: the labels fit, and every
   remaining pixel goes to the content column, which is where the tables are.

   .pc-sidebar is on all four side-nav partials, so this is one rule. */
@media (min-width: 992px) {
    body:not(.pc-public) .pc-sidebar {
        flex: 0 0 245px;
        width: 245px;
        max-width: 245px;
    }

    /* The content column beside it has its own col-lg-9/col-xl-10 share. Left
       alone, 245px + 83.33% is more than the row can hold and it wraps onto a
       line of its own UNDER the sidebar - which is what the events screen did.

       `~` rather than `+`: some pages put a <style> block or a comment between
       the two columns, and adjacency is a fragile thing to depend on for a
       rule whose failure mode is the whole page falling apart.

       min-width:0 matters as much as the flex: without it a column will not
       shrink below the widest thing inside it, so one wide table could push
       the layout back into wrapping. */
    body:not(.pc-public) .pc-sidebar ~ [class*="col-"] {
        flex: 1 1 0;
        max-width: none;
        width: auto;
        min-width: 0;
    }
}

/* ── Sub-navigation ──────────────────────────────────────────────────────────
   The events and tournaments sidebars nest the active section's pages in a
   <ul class="pc-sub">, and style them in their own inline <style> with
       .pc-sidenav .pc-sub .nav-link { padding-left: 2.15rem; font-size: .82rem }
   at specificity (0,2,0). The rule above is (0,3,1), so it won and the child
   pages came out the same size and indent as their parent — the hierarchy
   that tells you Distances belongs under Setup simply disappeared.

   Restated here above both, so the nesting survives. Sub-items carry no icon
   by design; the indent is what marks them as children. */
body:not(.pc-public) .pc-sidenav .pc-sub .nav-link {
    padding: .35rem .65rem .35rem 2.3rem;
    font-size: .855rem;
    font-weight: 500;
    color: var(--pc-muted);
}

body:not(.pc-public) .pc-sidenav .pc-sub .nav-link:hover {
    background-color: var(--pc-bg);
    color: var(--pc-navy);
}

body:not(.pc-public) .pc-sidenav .pc-sub .nav-link.active {
    background-color: var(--pc-hero);
    color: var(--pc-teal) !important;
    font-weight: 600;
}

body:not(.pc-public) .pc-sidenav .pc-sub {
    list-style: none;
    margin: .1rem 0 .35rem;
    padding: 0;
}

/* ── Entity header ───────────────────────────────────────────────────────────
   The panel at the top of a league, tournament or event screen. See
   resources/views/admin/partials/_entity-header.blade.php for the params. */
body:not(.pc-public) .pc-entity-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    background-color: var(--pc-surface);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius);
    box-shadow: var(--pc-shadow);
}

body:not(.pc-public) .pc-entity-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    border-radius: var(--pc-radius);
    background-color: var(--pc-hero);
    color: var(--pc-teal);
    font-size: 1.6rem;
}

/* min-width:0 so a long league name wraps instead of pushing the buttons off
   the right edge - the classic flex overflow. */
body:not(.pc-public) .pc-entity-body {
    flex: 1 1 auto;
    min-width: 0;
}

body:not(.pc-public) .pc-entity-crumbs {
    font-size: .8125rem;
    color: var(--pc-muted);
    margin-bottom: .1rem;
}

body:not(.pc-public) .pc-entity-crumbs a {
    color: var(--pc-muted);
    text-decoration: none;
}

body:not(.pc-public) .pc-entity-crumbs a:hover {
    color: var(--pc-teal);
    text-decoration: underline;
}

body:not(.pc-public) .pc-entity-sep {
    margin: 0 .35rem;
    opacity: .6;
}

body:not(.pc-public) .pc-entity-title {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--pc-navy);
    margin: 0;
    letter-spacing: -.02em;
}

body:not(.pc-public) .pc-entity-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem;
    margin-top: .4rem;
    font-size: .8125rem;
    color: var(--pc-muted);
}

body:not(.pc-public) .pc-entity-fact {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

body:not(.pc-public) .pc-entity-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    flex: 0 0 auto;
}

body:not(.pc-public) .pc-entity-actions .ti {
    margin-right: .25rem;
}

/* On a phone the buttons go under the title rather than squeezing it. */
@media (max-width: 575.98px) {
    body:not(.pc-public) .pc-entity-header {
        flex-wrap: wrap;
    }

    body:not(.pc-public) .pc-entity-actions {
        width: 100%;
    }
}

/* A guide rail down the nested pages, so the indent is unmistakable rather
   than just "a bit further along". */
body:not(.pc-public) .pc-sidenav .pc-sub {
    margin-left: .9rem;
    padding-left: .35rem;
    border-left: 2px solid var(--pc-border);
}

body:not(.pc-public) .pc-sidenav .pc-sub .nav-link {
    padding-left: 1.1rem;
}

/* A <form> in the actions slot (the tournament's Duplicate) must not break the
   row, and its button needs no margin of its own. */
body:not(.pc-public) .pc-entity-actions form {
    margin: 0;
    display: inline-flex;
}

body:not(.pc-public) .pc-entity-actions .btn .ti {
    margin-right: .3rem;
}

/* ── Page width ──────────────────────────────────────────────────────────────
   pc-overrides.css already widens .container-xl from Tabler's 1320px to
   --pc-measure. On the events admin pages it was not taking: those measured
   1320 while leagues and tournaments measured 1620, on the same screen.

   Two things could do that - Tabler's own rule winning the cascade, or
   --pc-measure not resolving, in which case max-width is invalid and the
   1320 underneath simply stands. Rather than guess which, this wins on
   specificity AND carries a literal fallback, so it holds either way.

   Written here because this file loads last. */
@media (min-width: 1400px) {
    body:not(.pc-public) .page-body > .container-xl,
    body:not(.pc-public) .page > .container-xl,
    body:not(.pc-public) .container-xl {
        max-width: var(--pc-measure, 1620px);
    }
}