/*
 * Bowlio brand theme bridge.
 *
 * Re-skins the Bootstrap 5.3 CDN bundle and this app's own chrome
 * (navbar/sidebar, footer, buttons, badges, links, forms, cards) with the
 * tokens from assets/css/design-system/ (a copy of the Bowlio Design
 * System's tokens/ folder - see that folder's own README for the source
 * palette and typography rationale).
 *
 * Loaded after design-system/styles.css and before custom.css, so the
 * page-specific rules in custom.css can still take the final word on any
 * one-off layout.
 */

/* ---- Theme colours (System Management > Theme) ----
   One property per element the super admin can recolour, each defaulting
   to the token it replaced, so with no theme saved the site looks exactly
   as before. A saved theme is printed after the stylesheets as a :root
   block of these same names (includes/ThemeSettings.php, which also lists
   the hex value of each default for the colour picker - keep the two in
   step). --action-primary and --action-primary-hover are set directly:
   buttons, badges and pagination already share them. */
:root {
    --theme-page-bg: var(--surface-page);
    /* --text-body is also a font size (tokens/typography.css loads after
       colors.css), so this resolves to nothing and text inherits black,
       as before this block existed. ThemeSettings records black as the
       default for that reason (IA-62). */
    --theme-page-text: var(--text-body);
    --theme-nav-bg: var(--surface-inverse);
    --theme-nav-text: var(--text-on-dark-muted);
    --theme-nav-text-active: var(--text-on-dark);
    --theme-nav-accent: var(--rule-accent);
    --theme-menu-text: var(--text-on-dark-muted);
    --theme-menu-text-active: var(--text-on-dark);
    --theme-menu-accent: var(--rule-accent);
    --theme-menu-bg: var(--green-800);
    --theme-drawer-bg: var(--white);
    --theme-drawer-text: var(--text-body);
    --theme-drawer-heading: var(--text-heading);
    --theme-drawer-accent: var(--rule-accent);
    --theme-footer-bg: var(--surface-inverse);
    --theme-footer-text: var(--text-on-dark-muted);
    --theme-footer-heading: var(--text-on-dark);
    --theme-footer-accent: var(--rule-accent);
    --theme-link: var(--text-link);
    --theme-link-hover: var(--text-link-hover);
    --theme-button-text: var(--text-on-dark);
}

/* ---- Base typography + links (tokens/base.css, scoped for Bootstrap) ---- */

body {
    font-family: var(--font-body);
    background-color: var(--theme-page-bg);
    color: var(--theme-page-text);
}

/* No colour here deliberately: headings must keep inheriting colour from
   their container (body text colour normally, but white inside .hero-section,
   .app-footer, stats-card, etc.) - setting one explicitly here overrode
   every light-on-dark heading sitewide with dark ink, making them
   unreadable on green/dark surfaces. */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    letter-spacing: var(--tracking-heading);
    margin-bottom: var(--space-4);
}

/* Plain text links only - excludes anything that is also a Bootstrap
   button, nav link, dropdown item or the site brand lockup, so buttons
   rendered as <a> don't pick up a coloured underline. */
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.msm-link):not(.card):not([class*="btn-"]) {
    color: var(--theme-link);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--theme-link) 35%, transparent);
    transition: var(--transition-control);
}

a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.msm-link):not(.card):not([class*="btn-"]):hover {
    color: var(--theme-link-hover);
    border-bottom-color: var(--theme-link);
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.bowlio-num, .table td.text-end, code, kbd {
    font-family: var(--font-mono);
}

/* ---- Navbar / sidebar (WordPress AdminCP style desktop menu) ---- */

.navbar {
    background-color: var(--theme-nav-bg) !important;
    font-family: var(--font-body);
}

.navbar .navbar-brand,
.navbar .nav-link,
.navbar .navbar-text,
.navbar .dropdown-toggle {
    color: var(--theme-nav-text-active) !important;
}

.navbar .nav-link {
    color: var(--theme-nav-text) !important;
}

.navbar .nav-link.active,
.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: var(--theme-nav-text-active) !important;
}

.navbar .dropdown-menu {
    background-color: var(--theme-menu-bg);
    border: none;
}

.navbar .dropdown-item {
    color: var(--theme-menu-text) !important;
}

/* Bootstrap's .text-muted is a dark grey: on the menu's dark green it is
   about 1.05:1 (system notification detail, "No system notifications").
   Inside the menu, muted means the menu's own muted light colour. */
.navbar .dropdown-item.text-muted,
.navbar .dropdown-item .text-muted {
    color: var(--theme-menu-text) !important;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus,
.navbar .dropdown-item.active {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--theme-menu-text-active) !important;
}

/* Desktop sidebar active-item / active-submenu-item accent: the brand's
   single red rule device, replacing the old teal left border. */
body.has-sidebar .navbar .nav-link.active {
    border-left-color: var(--theme-nav-accent) !important;
}

body.has-sidebar .navbar .dropdown-item.active {
    border-left-color: var(--theme-menu-accent) !important;
}

/* App footer: deep green band with the brand's 4px red rule opening it. */
.app-footer {
    background-color: var(--theme-footer-bg);
    color: var(--theme-footer-text);
    border-top: var(--rule-height) solid var(--theme-footer-accent);
    font-family: var(--font-body);
}

.app-footer .fw-bold {
    color: var(--theme-footer-heading);
    font-family: var(--font-display);
}

/* ---- Buttons ---- */

.btn {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    letter-spacing: 0.02em;
    border-radius: var(--radius-sm);
}

.btn-primary {
    background-color: var(--action-primary);
    border-color: var(--action-primary);
    color: var(--theme-button-text);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--action-primary-hover);
    border-color: var(--action-primary-hover);
    color: var(--theme-button-text);
}

/* --theme-button-active: set only by a saved theme that changes the
   hover colour, so the pressed state follows it (technical review TE-6). */
.btn-primary:active {
    background-color: var(--theme-button-active, var(--action-primary-active)) !important;
    border-color: var(--theme-button-active, var(--action-primary-active)) !important;
}

.btn-outline-primary {
    color: var(--action-primary);
    border-color: var(--action-primary);
}

.btn-outline-primary:hover {
    background-color: var(--action-primary);
    border-color: var(--action-primary);
    color: var(--theme-button-text);
}

.btn-success {
    background-color: var(--turf-600);
    border-color: var(--turf-600);
    color: var(--white);
}

.btn-success:hover,
.btn-success:focus {
    background-color: color-mix(in srgb, var(--turf-600) 85%, black);
    border-color: color-mix(in srgb, var(--turf-600) 85%, black);
    color: var(--white);
}

.btn-outline-success {
    color: var(--turf-600);
    border-color: var(--turf-600);
}

.btn-outline-success:hover {
    background-color: var(--turf-600);
    border-color: var(--turf-600);
    color: var(--white);
}

.btn-danger {
    background-color: var(--red-600);
    border-color: var(--red-600);
}

.btn-danger:hover,
.btn-danger:focus {
    background-color: var(--red-700);
    border-color: var(--red-700);
}

.btn-outline-danger {
    color: var(--red-600);
    border-color: var(--red-600);
}

.btn-outline-danger:hover {
    background-color: var(--red-600);
    border-color: var(--red-600);
}

.btn-warning {
    background-color: var(--gold-500);
    border-color: var(--gold-500);
    color: var(--ink-900);
}

.btn-warning:hover,
.btn-warning:focus {
    background-color: var(--gold-600);
    border-color: var(--gold-600);
    color: var(--ink-900);
}

.btn-info {
    background-color: var(--turf-100);
    border-color: var(--turf-200);
    color: var(--green-700);
}

.btn-info:hover,
.btn-info:focus {
    background-color: var(--turf-200);
    border-color: var(--turf-200);
    color: var(--green-700);
}

.btn-outline-warning {
    color: var(--gold-600);
    border-color: var(--gold-500);
}

.btn-outline-warning:hover {
    background-color: var(--gold-500);
    border-color: var(--gold-500);
    color: var(--ink-900);
}

.btn-outline-info {
    color: var(--green-700);
    border-color: var(--turf-200);
}

.btn-outline-info:hover {
    background-color: var(--turf-100);
    border-color: var(--turf-200);
    color: var(--green-700);
}

/* White on --slate-500 was 2.88:1 (fails WCAG 1.4.3); --ink-600 is 6.57:1. */
.btn-secondary {
    color: var(--white);
    background-color: var(--ink-600);
    border-color: var(--ink-600);
}

.btn-secondary:hover,
.btn-secondary:focus {
    color: var(--white);
    background-color: var(--ink-800);
    border-color: var(--ink-800);
}

/* Bootstrap's #6c757d outline is 4.15:1 on --surface-page (fails WCAG
   1.4.3); --ink-600 is 5.82:1. Used by the app's "Back"/export buttons. */
.btn-outline-secondary {
    color: var(--ink-600);
    border-color: var(--ink-600);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
    color: var(--white);
    background-color: var(--ink-600);
    border-color: var(--ink-600);
}

.btn-link {
    color: var(--theme-link);
}

.btn-link:hover {
    color: var(--theme-link-hover);
}

/* Focus is always red, on every surface - replaces the mixed blue focus
   rings left over from Bootstrap defaults and ad hoc component CSS. */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    box-shadow: var(--shadow-focus);
}

/* ---- Forms ---- */

.form-control:focus,
.form-select:focus {
    border-color: var(--green-700);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--green-700) 25%, transparent);
}

.form-check-input:checked {
    background-color: var(--action-primary);
    border-color: var(--action-primary);
}

.form-check-input:focus {
    border-color: var(--green-700);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--green-700) 25%, transparent);
}

.form-switch .form-check-input:checked {
    background-color: var(--turf-600) !important;
}

/* ---- Badges, text + background utilities ---- */

.badge.bg-primary,
.bg-primary {
    background-color: var(--action-primary) !important;
}

.badge.bg-success,
.bg-success {
    background-color: var(--turf-600) !important;
}

.badge.bg-danger,
.bg-danger {
    background-color: var(--red-600) !important;
}

.badge.bg-warning,
.bg-warning {
    background-color: var(--gold-500) !important;
    color: var(--ink-900) !important;
}

.badge.bg-info,
.bg-info {
    background-color: var(--turf-100) !important;
    color: var(--green-700) !important;
}

.text-primary {
    color: var(--action-primary) !important;
}

.text-success {
    color: var(--turf-600) !important;
}

.text-danger {
    color: var(--red-600) !important;
}

.text-warning {
    color: var(--gold-600) !important;
}

.text-info {
    color: var(--green-700) !important;
}

/* SB Admin 2-style grey scale used by the stat-card widgets (member/club/
   report dashboards) - maps their text-gray-NNN utility classes onto the
   design system's neutral text tokens instead of leaving them unstyled. */
.text-gray-800 {
    color: var(--text-heading) !important;
}

.text-gray-600 {
    color: var(--text-body) !important;
}

.text-gray-300 {
    color: var(--slate-300) !important;
}

/* ---- Alerts ---- */

.alert-success {
    background-color: var(--turf-100);
    border-color: var(--turf-200);
    color: var(--green-700);
}

.alert-danger {
    background-color: var(--red-100);
    border-color: var(--red-300);
    color: var(--red-700);
}

.alert-warning {
    background-color: var(--gold-100);
    border-color: var(--gold-500);
    color: var(--ink-900);
}

.alert-info {
    background-color: var(--turf-100);
    border-color: var(--turf-200);
    color: var(--green-700);
}

/* ---- Modals ----
   Bootstrap's stock modal is unbranded (square corners, generic shadow,
   flat black backdrop). Bring it in line with the design system's Dialog
   component: rounded card, soft overlay shadow, the brand's red rule
   opening the dialog, and a tinted footer band for actions. */

.modal-content {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-overlay);
    overflow: hidden;
}

.modal-content::before {
    content: '';
    display: block;
    flex: 0 0 auto;
    height: var(--rule-height);
    background: var(--rule-accent);
}

.modal-header {
    border-bottom-color: var(--border-subtle);
}

.modal-title {
    font-family: var(--font-display);
}

.modal-footer {
    background-color: var(--surface-page);
    border-top-color: var(--border-subtle);
}

.modal-backdrop.show {
    background-color: var(--surface-overlay);
    opacity: 1;
}

/* ---- Cards + tables ---- */

.card {
    border-radius: var(--radius-md);
    border-color: var(--border-subtle);
    box-shadow: var(--shadow-sm);
}

.card-header {
    background-color: var(--surface-sunken);
    border-bottom-color: var(--border-subtle);
    font-family: var(--font-display);
}

.table thead th {
    font-family: var(--font-display);
    font-size: var(--text-caption);
    letter-spacing: var(--tracking-micro);
    text-transform: uppercase;
    /* --text-muted is --ink-600 (5.82:1 here); it was --slate-500 at 2.55:1,
       failing WCAG 1.4.3 on every data table (a11y audit HIGH #2). */
    color: var(--text-muted);
    background-color: var(--surface-page);
    border-bottom-color: var(--border-default);
}

/* Design-system cell spacing (Bootstrap's own 0.5rem-all-round default
   leaves header/cell text sitting right on a card's edge, especially in a
   zero-padding card-body). */
.table > :not(caption) > * > th,
.table > :not(caption) > * > td {
    padding: var(--space-3) var(--space-4);
}

/* Bootstrap's contextual row/cell classes (own-club row in league
   standings, status rows in the calendar/admin tables) default to generic
   blue/grey/red - map them onto the same tones the Alert/Badge status
   colours use elsewhere. */
.table-primary,
.table-primary > th,
.table-primary > td {
    --bs-table-bg: var(--turf-100);
    --bs-table-striped-bg: var(--turf-100);
    --bs-table-color: var(--green-700);
    --bs-table-border-color: var(--turf-200);
}

.table-success,
.table-success > th,
.table-success > td {
    --bs-table-bg: var(--turf-100);
    --bs-table-striped-bg: var(--turf-100);
    --bs-table-color: var(--turf-600);
    --bs-table-border-color: var(--turf-200);
}

.table-danger,
.table-danger > th,
.table-danger > td {
    --bs-table-bg: var(--red-100);
    --bs-table-striped-bg: var(--red-100);
    --bs-table-color: var(--red-700);
    --bs-table-border-color: var(--red-300);
}

.table-warning,
.table-warning > th,
.table-warning > td {
    --bs-table-bg: var(--gold-100);
    --bs-table-striped-bg: var(--gold-100);
    --bs-table-color: var(--ink-900);
    --bs-table-border-color: var(--gold-500);
}

.table-info,
.table-info > th,
.table-info > td {
    --bs-table-bg: var(--turf-100);
    --bs-table-striped-bg: var(--turf-100);
    --bs-table-color: var(--green-700);
    --bs-table-border-color: var(--turf-200);
}

.pagination .page-link {
    color: var(--action-primary);
}

.pagination .page-item.active .page-link {
    background-color: var(--action-primary);
    border-color: var(--action-primary);
}

.nav-tabs .nav-link.active {
    border-bottom: 2px solid var(--rule-accent);
    color: var(--text-heading);
}

.spinner-border.text-primary {
    color: var(--action-primary) !important;
}