/*
    Club colours: docs/club-colours-design.md.

    A club chooses a main colour, a second colour, a panel style and a tile style. The layout
    writes one class for each on <html> (club-main--navy club-second--clay club-panels--edge
    club-tiles--tint), and everything those classes do is in this file. A club that has chosen
    nothing gets no class, and no rule here applies to it.

    No colour is ever written into a page: the content security policy forbids style attributes,
    and the list is fixed. To add a colour, add its five shades to the palette below and its two
    classes under it, then its name to the list of names. ClubThemeStylesheetTests reads this
    file and checks the contrast of every pairing that carries text.
*/

/* ---------- The palette: each colour once, in five shades ----------
   base: buttons and filled tiles, under white text.   dark: hover, and text on a pale shade.
   tint: a pale wash.   soft: paler, for a hover background.   line: a border on a pale shade. */
:root {
    --club-colour-green: #177a57;
    --club-colour-green-dark: #0e4f3e;
    --club-colour-green-tint: #e6f4ee;
    --club-colour-green-soft: #f2faf6;
    --club-colour-green-line: #badbcc;

    --club-colour-teal: #17788a;
    --club-colour-teal-dark: #0e4f5c;
    --club-colour-teal-tint: #e5f3f6;
    --club-colour-teal-soft: #f1f9fb;
    --club-colour-teal-line: #b5dbe3;

    --club-colour-navy: #1f3f77;
    --club-colour-navy-dark: #142a52;
    --club-colour-navy-tint: #e8eef8;
    --club-colour-navy-soft: #f3f6fc;
    --club-colour-navy-line: #bccbe6;

    --club-colour-blue: #1f63c4;
    --club-colour-blue-dark: #164791;
    --club-colour-blue-tint: #e7f0fc;
    --club-colour-blue-soft: #f2f7fe;
    --club-colour-blue-line: #b9d2f3;

    --club-colour-purple: #6a3fa0;
    --club-colour-purple-dark: #472a6e;
    --club-colour-purple-tint: #f0eaf8;
    --club-colour-purple-soft: #f7f3fb;
    --club-colour-purple-line: #d3c2e8;

    --club-colour-burgundy: #9a2f45;
    --club-colour-burgundy-dark: #6b1f30;
    --club-colour-burgundy-tint: #f8e9ec;
    --club-colour-burgundy-soft: #fcf3f5;
    --club-colour-burgundy-line: #e6bdc6;

    --club-colour-clay: #b8541a;
    --club-colour-clay-dark: #813a11;
    --club-colour-clay-tint: #fbeee5;
    --club-colour-clay-soft: #fdf6f1;
    --club-colour-clay-line: #eecbb3;

    --club-colour-charcoal: #36434f;
    --club-colour-charcoal-dark: #222c35;
    --club-colour-charcoal-tint: #eceff2;
    --club-colour-charcoal-soft: #f5f7f9;
    --club-colour-charcoal-line: #c9d1d8;
}

/* A club with a tile style and no second colour gets its main colour on the tiles. */
:root {
    --club-second: var(--club-main);
    --club-second-dark: var(--club-main-dark);
    --club-second-tint: var(--club-main-tint);
    --club-second-line: var(--club-main-line);
}

/* ---------- Main colour: replaces the five --club-main shades site.css reads ---------- */
.club-main--green { --club-main: var(--club-colour-green); --club-main-dark: var(--club-colour-green-dark); --club-main-tint: var(--club-colour-green-tint); --club-main-soft: var(--club-colour-green-soft); --club-main-line: var(--club-colour-green-line); }
.club-main--teal { --club-main: var(--club-colour-teal); --club-main-dark: var(--club-colour-teal-dark); --club-main-tint: var(--club-colour-teal-tint); --club-main-soft: var(--club-colour-teal-soft); --club-main-line: var(--club-colour-teal-line); }
.club-main--navy { --club-main: var(--club-colour-navy); --club-main-dark: var(--club-colour-navy-dark); --club-main-tint: var(--club-colour-navy-tint); --club-main-soft: var(--club-colour-navy-soft); --club-main-line: var(--club-colour-navy-line); }
.club-main--blue { --club-main: var(--club-colour-blue); --club-main-dark: var(--club-colour-blue-dark); --club-main-tint: var(--club-colour-blue-tint); --club-main-soft: var(--club-colour-blue-soft); --club-main-line: var(--club-colour-blue-line); }
.club-main--purple { --club-main: var(--club-colour-purple); --club-main-dark: var(--club-colour-purple-dark); --club-main-tint: var(--club-colour-purple-tint); --club-main-soft: var(--club-colour-purple-soft); --club-main-line: var(--club-colour-purple-line); }
.club-main--burgundy { --club-main: var(--club-colour-burgundy); --club-main-dark: var(--club-colour-burgundy-dark); --club-main-tint: var(--club-colour-burgundy-tint); --club-main-soft: var(--club-colour-burgundy-soft); --club-main-line: var(--club-colour-burgundy-line); }
.club-main--clay { --club-main: var(--club-colour-clay); --club-main-dark: var(--club-colour-clay-dark); --club-main-tint: var(--club-colour-clay-tint); --club-main-soft: var(--club-colour-clay-soft); --club-main-line: var(--club-colour-clay-line); }
.club-main--charcoal { --club-main: var(--club-colour-charcoal); --club-main-dark: var(--club-colour-charcoal-dark); --club-main-tint: var(--club-colour-charcoal-tint); --club-main-soft: var(--club-colour-charcoal-soft); --club-main-line: var(--club-colour-charcoal-line); }

/* ---------- Second colour: read only by the rules in this file ---------- */
.club-second--green { --club-second: var(--club-colour-green); --club-second-dark: var(--club-colour-green-dark); --club-second-tint: var(--club-colour-green-tint); --club-second-line: var(--club-colour-green-line); }
.club-second--teal { --club-second: var(--club-colour-teal); --club-second-dark: var(--club-colour-teal-dark); --club-second-tint: var(--club-colour-teal-tint); --club-second-line: var(--club-colour-teal-line); }
.club-second--navy { --club-second: var(--club-colour-navy); --club-second-dark: var(--club-colour-navy-dark); --club-second-tint: var(--club-colour-navy-tint); --club-second-line: var(--club-colour-navy-line); }
.club-second--blue { --club-second: var(--club-colour-blue); --club-second-dark: var(--club-colour-blue-dark); --club-second-tint: var(--club-colour-blue-tint); --club-second-line: var(--club-colour-blue-line); }
.club-second--purple { --club-second: var(--club-colour-purple); --club-second-dark: var(--club-colour-purple-dark); --club-second-tint: var(--club-colour-purple-tint); --club-second-line: var(--club-colour-purple-line); }
.club-second--burgundy { --club-second: var(--club-colour-burgundy); --club-second-dark: var(--club-colour-burgundy-dark); --club-second-tint: var(--club-colour-burgundy-tint); --club-second-line: var(--club-colour-burgundy-line); }
.club-second--clay { --club-second: var(--club-colour-clay); --club-second-dark: var(--club-colour-clay-dark); --club-second-tint: var(--club-colour-clay-tint); --club-second-line: var(--club-colour-clay-line); }
.club-second--charcoal { --club-second: var(--club-colour-charcoal); --club-second-dark: var(--club-colour-charcoal-dark); --club-second-tint: var(--club-colour-charcoal-tint); --club-second-line: var(--club-colour-charcoal-line); }

/* ---------- Secondary buttons, once a second colour is chosen ----------
   Through Bootstrap's own button variables, so the pressed, ticked and disabled states follow
   too. The small switches built from these buttons (By time / By court) come with them. */
[class*="club-second--"] :is(.btn-outline-secondary, .btn-secondary) {
    --bs-btn-color: var(--club-second-dark);
    --bs-btn-bg: var(--club-second-tint);
    --bs-btn-border-color: var(--club-second);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--club-second);
    --bs-btn-hover-border-color: var(--club-second);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--club-second);
    --bs-btn-active-border-color: var(--club-second);
    --bs-btn-disabled-color: var(--club-second-dark);
    --bs-btn-disabled-bg: var(--club-second-tint);
    --bs-btn-disabled-border-color: var(--club-second-line);
}

/* ---------- Panels ----------
   The boxes a page is laid out in. A card that is one of a list (.ladder-card, .tournament-card,
   .blog-card) is not a panel: a coloured edge on every card of a long list is too much. */
.club-panels--tint :is(.content-panel, .management-panel, .form-panel) {
    background: var(--club-main-tint);
    border-color: var(--club-main-line);
}

.club-panels--edge :is(.content-panel, .management-panel, .form-panel) {
    border-top: 4px solid var(--club-main);
}

/* A plain tile on a tinted panel is white, or the grey tile sits on the wash and looks dirty. */
.club-panels--tint :is(.member-landing-tile, .member-landing-event, .admin-dashboard-link, .competition-primary-link, .competition-tool-link, .competition-info-link, .help-article-card, .help-related-link) {
    background: var(--club-surface);
}

/* ---------- Tiles ----------
   A tile is something a member or an administrator presses to go somewhere: the member home
   page's Where to next, the admin dashboard and the module dashboards, the competition hub, and
   the help cards. A row of data that happens to be drawn the same grey (.tournament-admin-row,
   .stat-card) is not a tile.

   Tinted washes every tile. Solid fills only the member home page's tiles: a page of thirty
   filled tiles, such as the admin dashboard, was too much colour, so every other tile is tinted
   for Solid as well. An event card carries a paragraph of text, so it is tinted at most. */
:is(.club-tiles--tint, .club-tiles--solid) :is(.member-landing-event, .admin-dashboard-link, .competition-primary-link, .competition-tool-link, .competition-info-link, .help-article-card, .help-related-link, .public-card--link),
.club-tiles--tint .member-landing-tile {
    background: var(--club-second-tint);
    border-color: var(--club-second-line);
}

/* The public website's link cards (Membership, Coaching Courses, Events on a club's home page)
   are its tiles. Its other cards are items in a list, and its sections are not boxed, so the
   panel style has nothing to draw there. */
:is(.club-tiles--tint, .club-tiles--solid) .public-card--link:is(:hover, :focus) {
    border-color: var(--club-second);
}

.club-tiles--tint .member-landing-tile i,
:is(.club-tiles--tint, .club-tiles--solid) :is(.admin-dashboard-link, .help-article-card) > i {
    color: var(--club-second);
}

/* The competition hub draws its icon in a circle of the main colour's wash, which would sit on
   the second colour's wash. The circle goes white and the icon takes the second colour. */
:is(.club-tiles--tint, .club-tiles--solid) :is(.competition-primary-link, .competition-tool-link) i {
    color: var(--club-second-dark);
    background: var(--club-surface);
}

:is(.club-tiles--tint, .club-tiles--solid) :is(.member-landing-event, .admin-dashboard-link, .competition-primary-link, .competition-tool-link, .competition-info-link, .help-article-card, .help-related-link):is(:hover, :focus),
.club-tiles--tint .member-landing-tile:is(:hover, :focus) {
    background: var(--club-second-tint);
    border-color: var(--club-second);
    color: var(--club-second-dark);
}

.club-tiles--solid .member-landing-tile {
    background: var(--club-second);
    border-color: var(--club-second);
    color: #fff;
}

.club-tiles--solid .member-landing-tile small {
    color: rgba(255, 255, 255, 0.88);
}

.club-tiles--solid .member-landing-tile:is(:hover, :focus) {
    background: var(--club-second-dark);
    border-color: var(--club-second-dark);
    color: #fff;
}

/* The date strip on court booking is tinted for either tile style and never filled: seven filled
   blocks in a row was too much colour. The chosen day is the filled one. */
:is(.club-tiles--tint, .club-tiles--solid) .court-booking-date:not(.court-booking-date--selected) {
    background: var(--club-second-tint);
    border-color: var(--club-second-line);
    color: var(--club-second-dark);
}

:is(.club-tiles--tint, .club-tiles--solid) .court-booking-date--selected {
    background: var(--club-second);
    border-color: var(--club-second);
}

/* ---------- The Club Colours screen (Views/ClubColours/Index.cshtml) ---------- */
.club-colours-layout {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

@media (min-width: 992px) {
    .club-colours-layout {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    }

    .club-colours-preview {
        position: sticky;
        top: 96px;
    }
}

.club-colours-form,
.club-colours-preview {
    padding: 1.25rem;
}

.club-colours-group {
    margin: 0 0 1.5rem;
}

/* Two classes, because .content-panel p would otherwise make every hint semi-bold. */
.club-colours-group .form-text {
    margin: 0 0 0.6rem;
    font-weight: 400;
}

.club-colour-picker,
.club-style-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* A choice is a label after its hidden radio button. 44px tall, in px because the root font size
   is 15px and a tap target has to be an exact size. */
.club-colour-choice,
.club-style-choice {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.35rem 0.85rem 0.35rem 0.5rem;
    color: var(--club-ink);
    background: var(--club-surface);
    border: 1px solid var(--club-line);
    border-radius: 999px;
    font-weight: 650;
    cursor: pointer;
}

.club-style-choice {
    padding-left: 0.85rem;
}

.btn-check:checked + :is(.club-colour-choice, .club-style-choice) {
    border-color: var(--club-ink);
    box-shadow: 0 0 0 1px var(--club-ink);
}

.btn-check:focus-visible + :is(.club-colour-choice, .club-style-choice) {
    outline: 2px solid var(--club-ink);
    outline-offset: 2px;
}

.club-colour-choice__swatch {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.12);
}

.club-colour-swatch--green { background: var(--club-colour-green); }
.club-colour-swatch--teal { background: var(--club-colour-teal); }
.club-colour-swatch--navy { background: var(--club-colour-navy); }
.club-colour-swatch--blue { background: var(--club-colour-blue); }
.club-colour-swatch--purple { background: var(--club-colour-purple); }
.club-colour-swatch--burgundy { background: var(--club-colour-burgundy); }
.club-colour-swatch--clay { background: var(--club-colour-clay); }
.club-colour-swatch--charcoal { background: var(--club-colour-charcoal); }

/* None: an empty ring, so it reads as "no colour" and not as white. */
.club-colour-swatch--none {
    background: transparent;
    border: 2px dashed var(--club-muted);
}

.club-colours-standard {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--club-line);
}

/* Two classes, because .content-panel p would otherwise set the weight and margin. */
.club-colours-form .club-colours-standard p,
.club-colours-preview .club-colours-preview__link {
    margin: 0 0 0.75rem;
    font-weight: 400;
}

.club-colours-preview h2 {
    margin-bottom: 0.5rem;
}

.club-colours-preview__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}

.club-colours-preview__tiles {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 1rem;
}

@media (max-width: 575.98px) {
    .club-colours-preview__tiles {
        grid-template-columns: minmax(0, 1fr);
    }
}