/*
 * Vendor correction layer: retargets Havit's customised Bootstrap 5.3 build and
 * Havit's own components at the neobrutalist tokens in theme-tokens.css.
 *
 * Technique: Bootstrap compiles literal colours into each variant class
 * (.btn-primary alone sets 13 --bs-btn-* properties). Redeclaring the same class
 * at identical specificity in a later stylesheet wins on source order, so no
 * !important is needed — but every property a variant sets must be restated, or
 * the ones left out keep Havit's brand blue.
 *
 * Regenerate this file wholesale when bumping Havit.Blazor.
 */

/* ============================================================
   Buttons
   ============================================================ */

.btn {
    --bs-btn-border-radius: 0;
    --bs-btn-border-width: var(--cf-border-width);
    --bs-btn-font-family: var(--cf-font-head);
    --bs-btn-font-weight: 600;
    --bs-btn-padding-x: 1.1rem;
    --bs-btn-padding-y: .5rem;
    --bs-btn-box-shadow: none;
    --bs-btn-focus-box-shadow: 0 0 0 3px var(--cf-focus);
    --bs-btn-disabled-opacity: .4;
    text-transform: uppercase;
    letter-spacing: var(--cf-tracking-ui);
}

/*
 * Every variant is framed in --cf-line. Text follows the fill it sits on: the
 * pastel fills carry --cf-on-accent, the paper-backed variants below restate it
 * as --cf-ink.
 */
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-light,
.btn-outline-light,
.btn-outline-secondary,
.btn-success,
.btn-info,
.btn-warning {
    --bs-btn-color: var(--cf-on-accent);
    --bs-btn-hover-color: var(--cf-on-accent);
    --bs-btn-active-color: var(--cf-on-accent);
    --bs-btn-disabled-color: var(--cf-on-accent);
    --bs-btn-border-color: var(--cf-line);
    --bs-btn-hover-border-color: var(--cf-line);
    --bs-btn-active-border-color: var(--cf-line);
    --bs-btn-disabled-border-color: var(--cf-line);
    /* kills Bootstrap's inset gradient, which fights the flat offset shadow */
    --bs-btn-active-shadow: none;
    --bs-gradient: none;
}

.btn-primary {
    --bs-btn-bg: var(--cf-pink);
    --bs-btn-hover-bg: var(--cf-pink-hover);
    --bs-btn-active-bg: var(--cf-pink-active);
    --bs-btn-disabled-bg: var(--cf-pink-disabled);
    --bs-btn-focus-shadow-rgb: var(--cf-pink-rgb);
}

/* cancel / neutral: paper, turns pink on hover like the template's secondary */
.btn-secondary,
.btn-outline-secondary {
    --bs-btn-color: var(--cf-ink);
    --bs-btn-bg: var(--cf-paper);
    --bs-btn-hover-bg: var(--cf-paper);
    --bs-btn-hover-color: var(--cf-link);
    --bs-btn-active-bg: var(--cf-tint);
    --bs-btn-active-color: var(--cf-link);
    --bs-btn-disabled-color: var(--cf-ink);
    --bs-btn-disabled-bg: var(--cf-paper);
}

.btn-danger {
    --bs-btn-bg: var(--cf-salmon);
    --bs-btn-hover-bg: var(--cf-salmon-hover);
    --bs-btn-active-bg: var(--cf-salmon-active);
    --bs-btn-disabled-bg: var(--cf-salmon-disabled);
}

/*
 * Light comes in two flavours that must stay visually distinct: EditTournamentRound
 * drives `Outline` off a bool to build a segmented on/off toggle, so filled-light
 * (on) and outline-light (off) cannot collapse to the same colour.
 */
.btn-light {
    --bs-btn-bg: var(--cf-yellow);
    --bs-btn-hover-bg: var(--cf-yellow-hover);
    --bs-btn-active-bg: var(--cf-yellow-active);
    --bs-btn-disabled-bg: var(--cf-yellow-disabled);
}

/* paper at rest, so ink text; the yellow hover and press keep the on-accent text */
.btn-outline-light {
    --bs-btn-color: var(--cf-ink);
    --bs-btn-bg: var(--cf-paper);
    --bs-btn-hover-bg: var(--cf-yellow);
    --bs-btn-active-bg: var(--cf-yellow-active);
    --bs-btn-disabled-color: var(--cf-ink);
    --bs-btn-disabled-bg: var(--cf-paper);
}

.btn-success,
.btn-info {
    --bs-btn-bg: var(--cf-blue);
    --bs-btn-hover-bg: var(--cf-blue-hover);
    --bs-btn-active-bg: var(--cf-blue-active);
    --bs-btn-disabled-bg: var(--cf-blue-disabled);
}

.btn-warning {
    --bs-btn-bg: var(--cf-yellow);
    --bs-btn-hover-bg: var(--cf-yellow-hover);
    --bs-btn-active-bg: var(--cf-yellow-active);
    --bs-btn-disabled-bg: var(--cf-yellow-disabled);
}

.btn-outline-primary {
    --bs-btn-color: var(--cf-ink);
    --bs-btn-bg: var(--cf-paper);
    --bs-btn-border-color: var(--cf-line);
    --bs-btn-hover-color: var(--cf-on-accent);
    --bs-btn-hover-bg: var(--cf-pink);
    --bs-btn-hover-border-color: var(--cf-line);
    --bs-btn-active-color: var(--cf-on-accent);
    --bs-btn-active-bg: var(--cf-pink-active);
    --bs-btn-active-border-color: var(--cf-line);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: var(--cf-muted);
    --bs-btn-disabled-bg: var(--cf-paper);
    --bs-btn-disabled-border-color: var(--cf-muted);
    --bs-gradient: none;
}

.btn-outline-danger {
    --bs-btn-color: var(--cf-ink);
    --bs-btn-bg: var(--cf-paper);
    --bs-btn-border-color: var(--cf-line);
    --bs-btn-hover-color: var(--cf-on-accent);
    --bs-btn-hover-bg: var(--cf-salmon);
    --bs-btn-hover-border-color: var(--cf-line);
    --bs-btn-active-color: var(--cf-on-accent);
    --bs-btn-active-bg: var(--cf-salmon-active);
    --bs-btn-active-border-color: var(--cf-line);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: var(--cf-muted);
    --bs-btn-disabled-bg: var(--cf-paper);
    --bs-btn-disabled-border-color: var(--cf-muted);
    --bs-gradient: none;
}

/* the inline edit pencils: bare text, no frame */
.btn-link {
    --bs-btn-color: var(--cf-ink);
    --bs-btn-hover-color: var(--cf-link);
    --bs-btn-active-color: var(--cf-link-hover);
    --bs-btn-disabled-color: var(--cf-muted);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-box-shadow: none;
    --bs-btn-border-width: 0;
    text-decoration: none;
}

.btn-link:hover {
    text-decoration: underline wavy currentColor;
    text-underline-offset: 4px;
}

/* ---- the offset shadow: the one thing no Bootstrap variable exposes ---- */

.btn:not(.btn-link):not(.btn-sm),
.cf-pressable,
a.card,
.club-card,
.stat-link .card {
    box-shadow: var(--cf-shadow);
    transition: var(--cf-transition);
}

.btn:not(.btn-link):not(.btn-sm):hover,
.cf-pressable:hover,
a.card:hover,
.club-card:hover,
.stat-link .card:hover {
    box-shadow: var(--cf-shadow-lg);
    transform: var(--cf-lift);
}

.btn:not(.btn-link):not(.btn-sm):active,
.btn:not(.btn-link):not(.btn-sm).active,
.cf-pressable:active,
a.card:active,
.club-card:active,
.stat-link .card:active {
    box-shadow: var(--cf-shadow-sm);
    transform: var(--cf-press);
}

.table .btn:not(.btn-link):not(.btn-sm),
.hx-grid .btn:not(.btn-link):not(.btn-sm) {
    --bs-btn-border-width: 2px;
    --bs-btn-padding-x: .5rem;
    --bs-btn-padding-y: .2rem;
    box-shadow: none;
}

.table .btn:not(.btn-link):not(.btn-sm):hover,
.hx-grid .btn:not(.btn-link):not(.btn-sm):hover,
.table .btn:not(.btn-link):not(.btn-sm):active,
.hx-grid .btn:not(.btn-link):not(.btn-sm):active {
    box-shadow: none;
    transform: none;
}

/*
 * Small buttons are the pencil/trash icons living inside table rows. A 4px offset
 * shadow on every row turns a 30-row standings grid into a wall of shadows, so
 * they stay flat with a thinner frame.
 */
.btn-sm {
    --bs-btn-border-width: 2px;
    --bs-btn-padding-x: .5rem;
    --bs-btn-padding-y: .2rem;
    box-shadow: none;
}

.btn:disabled,
.btn.disabled,
fieldset:disabled .btn,
.navbar-toggler,
.hx-sidebar-navbar-toggler {
    box-shadow: none !important;
    transform: none !important;
}

/* keyboard focus must not silently swap a secondary button's label to pink */
.btn:focus-visible:not(:hover) {
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
}

/* ============================================================
   Badges — filled, bordered, never pressable
   ============================================================ */

.badge {
    --bs-badge-color: var(--cf-on-accent);
    --bs-badge-border-radius: 0;
    --bs-badge-font-weight: 600;
    --bs-badge-padding-x: .55em;
    --bs-badge-padding-y: .35em;
    border: 2px solid var(--cf-line);
    font-family: var(--cf-font-head);
    text-transform: uppercase;
    letter-spacing: var(--cf-tracking-ui);
}

/* .text-bg-* hardcodes `color: #fff !important`, so this is the one place the
   override has to match that weight */
.text-bg-primary,
.text-bg-secondary,
.text-bg-success,
.text-bg-danger,
.text-bg-warning,
.text-bg-info,
.text-bg-light,
.text-bg-dark {
    color: var(--cf-on-accent) !important;
}

.text-bg-primary { background-color: var(--cf-pink) !important; }
.text-bg-secondary { background-color: var(--cf-paper) !important; color: var(--cf-ink) !important; }
.text-bg-success { background-color: var(--cf-blue) !important; }
.text-bg-danger { background-color: var(--cf-salmon) !important; }
.text-bg-warning { background-color: var(--cf-yellow) !important; }
.text-bg-info { background-color: var(--cf-blue) !important; }
.text-bg-light { background-color: var(--cf-paper) !important; color: var(--cf-ink) !important; }
.text-bg-dark { background-color: var(--cf-yellow) !important; }

/* ============================================================
   Cards
   ============================================================ */

.card {
    --bs-card-border-width: var(--cf-border-width);
    --bs-card-border-color: var(--cf-line);
    --bs-card-border-radius: 0;
    --bs-card-inner-border-radius: 0;
    --bs-card-bg: var(--cf-paper);
    --bs-card-cap-bg: var(--cf-blue-surface);
    --bs-card-cap-color: var(--cf-ink);
    --bs-card-color: var(--cf-ink);
    --bs-card-box-shadow: none;
    --bs-card-spacer-x: 1.25rem;
    --bs-card-spacer-y: 1.25rem;
}

.card-header {
    border-bottom: var(--cf-border);
    font-family: var(--cf-font-head);
    text-transform: uppercase;
    font-weight: 600;
}

.card-title {
    font-family: var(--cf-font-head);
    font-weight: 600;
}

/* ============================================================
   Tables — framed and divided like everything else, but never lifted:
   a grid is a data surface, so it takes the border and skips the shadow.
   ============================================================ */

.table {
    /* the global 3px would put a heavy rule under every single cell */
    --bs-border-width: 1px;
    /* no offset shadow here: the frame separates the grid, elevation would not */
    box-shadow: none;
    /* hold the body scale back here: a 55-row standings grid needs density, not prose size */
    font-size: 1.15rem;
    --bs-table-bg: var(--cf-paper);
    --bs-table-color: var(--cf-ink);
    --bs-table-border-color: var(--cf-line);
    --bs-table-striped-bg: var(--cf-tint);
    --bs-table-striped-color: var(--cf-ink);
    --bs-table-hover-color: var(--cf-ink);
    --bs-table-active-bg: var(--cf-tint-strong);
    --bs-table-active-color: var(--cf-ink);
    margin-bottom: 0;
}

/*
 * Setting --bs-table-bg rather than `background` on the header: Bootstrap paints
 * cells with `box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, ...)`, which
 * would overpaint a plain background the moment anyone adds .table-striped.
 */
.table > thead > tr > th {
    --bs-table-bg: var(--cf-yellow-surface);
    font-family: var(--cf-font-head);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: var(--cf-tracking-ui);
    border-bottom: var(--cf-border);
    white-space: nowrap;
}

.table > tbody > tr > td {
    border-bottom: 1px solid var(--cf-line);
    vertical-align: middle;
}

.table > tbody > tr:last-child > td {
    border-bottom: 0;
}

/*
 * A light tint for tracking a row across a wide grid. No pointer cursor: no grid in
 * this app handles a row click, so hover must not imply one.
 */
.table > tbody > tr:hover > * {
    --bs-table-bg-state: var(--cf-hover-tint);
}

/* Havit marks the selected row; keep it readable rather than Bootstrap's grey */
.table > tbody > tr.table-active > * {
    --bs-table-bg-state: var(--cf-tint-strong);
}

/*
 * The frame goes on the wrapper, not the <table>: Havit switches the grid to
 * `border-collapse: separate` when a sticky header is present, and a border on the
 * table element renders differently between the two collapse modes.
 */
.hx-grid-container,
.table-responsive {
    border: var(--cf-border);
}

/* ============================================================
   Forms — 5.3 exposes no --bs-form-control-* variables
   ============================================================ */

.form-control,
.form-select,
.input-group-text {
    border: var(--cf-border);
    border-radius: 0;
    box-shadow: none;
    color: var(--cf-ink);
    background-color: var(--cf-paper);
    /*
     * Match --bs-btn-padding-y so an input and a button sitting side by side share
     * one control height. Set the axis only — the autosuggest puts its icon in the
     * inline padding, and a shorthand here would overwrite that.
     */
    padding-block: .5rem;
    font-size: 1.15rem;
}

.input-group-text {
    background-color: var(--cf-tint);
    font-family: var(--cf-font-head);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--cf-line);
    outline: 0;
    box-shadow: 0 0 0 3px var(--cf-focus);
}

/* Havit hardcodes a grey label colour; a later plain rule is enough to win */
.form-label {
    color: var(--cf-ink);
    font-family: var(--cf-font-head);
    font-weight: 600;
    text-transform: uppercase;
    font-size: .8125rem;
    letter-spacing: var(--cf-tracking-ui);
}

/* Havit hardcodes #6c757d here too */
.form-check-label {
    color: var(--cf-muted);
}

.form-check-input {
    border: 2px solid var(--cf-line);
    border-radius: 0;
}

.form-check-input[type="checkbox"] {
    border-radius: 0;
}

.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--cf-pink);
    border-color: var(--cf-line);
}

/* the stock tick and switch knob are white — invisible on pink */
.form-check-input:checked[type="checkbox"] {
    --bs-form-check-bg-image: var(--cf-icon-check);
}

/*
 * The knob colour must beat two Bootstrap rules: the light blue knob on
 * .form-switch .form-check-input:focus (0,3,0), and the white one on
 * [data-bs-theme=dark] .form-switch .form-check-input:not(:checked):not(:focus) (0,5,0).
 */
.form-switch .form-check-input,
.form-switch .form-check-input:focus,
[data-bs-theme] .form-switch .form-check-input:not(:checked):not(:focus) {
    border-radius: 0;
    --bs-form-switch-bg: var(--cf-icon-switch-off);
}

.form-switch .form-check-input:checked {
    --bs-form-switch-bg: var(--cf-icon-switch-on);
    background-color: var(--cf-pink);
}

/* the unchecked track would otherwise inherit --bs-border-color, i.e. solid black */
.form-switch .form-check-input:not(:checked) {
    background-color: var(--cf-paper);
}

/* :root lifts this to (0,2,0), level with Bootstrap's [data-bs-theme=dark] .form-select, and it loads later */
:root .form-select {
    --bs-form-select-bg-img: var(--cf-icon-select);
}

/* ============================================================
   Alerts, list groups, tabs, modal, dropdown, navbar
   ============================================================ */

.alert {
    --bs-alert-border-radius: 0;
    --bs-alert-color: var(--cf-ink);
    border: var(--cf-border);
    font-weight: 500;
}

.list-group {
    /* rows, not boxes: one hairline between items, no heavy frame */
    --bs-list-group-border-radius: 0;
    --bs-list-group-border-width: 1px;
    --bs-list-group-border-color: var(--cf-hairline);
    --bs-list-group-color: var(--cf-ink);
    --bs-list-group-bg: var(--cf-paper);
    --bs-list-group-action-color: var(--cf-ink);
    --bs-list-group-action-hover-color: var(--cf-ink);
    --bs-list-group-action-hover-bg: var(--cf-yellow-surface);
    --bs-list-group-action-active-color: var(--cf-ink);
    --bs-list-group-action-active-bg: var(--cf-yellow-surface-active);
    /* the selected row is a pink fill, so it takes the on-accent text */
    --bs-list-group-active-color: var(--cf-on-accent);
    --bs-list-group-active-bg: var(--cf-pink);
    --bs-list-group-active-border-color: var(--cf-hairline);
}

/* clickable list rows say so with colour alone */
.list-group-item-action {
    cursor: pointer;
    transition: background-color .15s;
}

.nav {
    --bs-nav-link-color: var(--cf-ink);
    --bs-nav-link-hover-color: var(--cf-link);
}

.nav-tabs {
    --bs-nav-tabs-border-width: var(--cf-border-width);
    --bs-nav-tabs-border-color: var(--cf-line);
    --bs-nav-tabs-border-radius: 0;
    --bs-nav-tabs-link-active-color: var(--cf-ink);
    --bs-nav-tabs-link-active-bg: var(--cf-yellow-surface);
    --bs-nav-tabs-link-active-border-color: var(--cf-line);
    --bs-nav-tabs-link-hover-border-color: var(--cf-line);
    font-family: var(--cf-font-head);
    font-weight: 600;
    text-transform: uppercase;
}

.nav-pills {
    --bs-nav-pills-border-radius: 0;
    --bs-nav-pills-link-active-color: var(--cf-ink);
    --bs-nav-pills-link-active-bg: var(--cf-yellow-surface);
}

.modal {
    --bs-modal-bg: var(--cf-paper);
    --bs-modal-color: var(--cf-ink);
    --bs-modal-border-color: var(--cf-line);
    --bs-modal-border-width: var(--cf-border-width);
    --bs-modal-border-radius: 0;
    --bs-modal-inner-border-radius: 0;
    /* a dialog is not pressable, but it does need elevation — a deliberate static offset */
    --bs-modal-box-shadow: 8px 8px 0 0 var(--cf-line);
    --bs-modal-header-border-color: var(--cf-line);
    --bs-modal-header-border-width: var(--cf-border-width);
    --bs-modal-footer-border-color: var(--cf-line);
    --bs-modal-footer-border-width: var(--cf-border-width);
}

.modal-title {
    font-family: var(--cf-font-head);
    text-transform: uppercase;
    font-weight: 600;
}

.dropdown-menu {
    --bs-dropdown-border-width: var(--cf-border-width);
    --bs-dropdown-border-color: var(--cf-line);
    --bs-dropdown-border-radius: 0;
    --bs-dropdown-inner-border-radius: 0;
    --bs-dropdown-box-shadow: var(--cf-shadow);
    --bs-dropdown-link-color: var(--cf-ink);
    --bs-dropdown-link-hover-color: var(--cf-ink);
    --bs-dropdown-link-hover-bg: var(--cf-tint);
    --bs-dropdown-link-active-color: var(--cf-ink);
    --bs-dropdown-link-active-bg: var(--cf-yellow-surface);
}

/* focus rings Bootstrap and Havit hardcode as a 25% brand blue, which vanishes on dark paper */
.btn-close {
    --bs-btn-close-focus-shadow: 0 0 0 3px var(--cf-focus);
}

.nav-link:focus-visible,
.layout-sidebar .hx-sidebar-navbar-toggler:focus-within {
    box-shadow: 0 0 0 3px var(--cf-focus);
}

/* radii Bootstrap hardcodes outside the variable system */
.btn-close,
kbd {
    border-radius: 0;
}

/* ...but a radio and a spinner are genuinely round */
.form-check-input[type="radio"] {
    border-radius: 50%;
}

/* ============================================================
   Havit component variables
   ============================================================ */

:root {
    --hx-button-gap: .6rem;
    --hx-form-spacing: 1rem;

    /*
     * Sidebar. The item hover/active *-background-color variables take an RGB TRIPLE,
     * not a colour — Havit feeds them to rgba() together with a matching -opacity
     * variable. --hx-sidebar-background-color itself is a plain colour.
     */
    --hx-sidebar-width: 240px;
    --hx-sidebar-background-color: var(--cf-yellow-surface);
    --hx-sidebar-item-border-radius: 0;
    --hx-sidebar-item-padding: 1.25rem 1rem;
    --hx-sidebar-item-font-size: 1.15rem;
    --hx-sidebar-item-color: var(--cf-ink);
    --hx-sidebar-item-icon-color: var(--cf-ink);
    --hx-sidebar-item-hover-color: var(--cf-ink);
    --hx-sidebar-item-hover-icon-color: var(--cf-ink);
    --hx-sidebar-item-hover-background-color: var(--cf-paper-rgb);
    --hx-sidebar-item-hover-background-opacity: 0;
    --hx-sidebar-item-active-color: var(--cf-ink);
    --hx-sidebar-item-active-icon-color: var(--cf-ink);
    --hx-sidebar-item-active-background-color: var(--cf-paper-rgb);
    --hx-sidebar-item-active-background-opacity: 0;
    --hx-sidebar-item-active-font-weight: 600;
    --hx-sidebar-header-padding: 0;
    --hx-sidebar-body-padding: 0.5rem 0 0 0;
    --hx-sidebar-body-nav-gap: 0;

    --hx-grid-sorted-icon-color: var(--cf-ink);
    --hx-grid-button-hover-background: var(--cf-yellow-surface);
    --hx-grid-button-border-radius: 0;
    --hx-grid-progress-indicator-color: var(--cf-pink);

    --hx-autosuggest-item-highlighted-background-color: var(--cf-blue-surface);
    --hx-search-box-item-highlighted-background-color: var(--cf-blue-surface);
    --hx-input-tags-control-focused-border-color: var(--cf-line);
    --hx-input-tags-control-focused-box-shadow: 0 0 0 3px var(--cf-focus);
    --hx-input-file-drop-zone-border-width: var(--cf-border-width);
    --hx-input-file-drop-zone-border-color: var(--cf-line);
    --hx-input-file-drop-zone-border-radius: 0;
    --hx-calendar-day-border-radius: 0;
    --hx-calendar-day-selected-background: var(--cf-pink);
    --hx-calendar-day-selected-color: var(--cf-on-accent);
    --hx-context-menu-button-border-radius: 0;
    --hx-chip-list-border-radius: 0;
    --hx-tree-view-item-border-radius: 0;
}

/* sidebar nav items in the display face, divided by hairlines */
.hx-sidebar .nav-link {
    font-family: var(--cf-font-head);
    text-transform: uppercase;
    font-weight: 600;
}

/* hover and active match the header navbar: no fill, just the wavy underline */
.hx-sidebar .nav-link:hover,
.hx-sidebar .nav-link.active {
    text-decoration: underline wavy var(--cf-ink);
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
    text-decoration-skip-ink: none;
}