/* ============================================================
   Bowling Tournament Theme — "Lane & Strike" Color Palette
   Overrides Bootstrap 5.3 CSS custom properties
   ============================================================ */

:root,
[data-bs-theme="light"] {
    /* Primary — Lane approach arrows / blue lane lights */
    --bs-primary: #2563eb;
    --bs-primary-rgb: 37, 99, 235;
    --bs-primary-text-emphasis: #0f2d6e;
    --bs-primary-bg-subtle: #dbeafe;
    --bs-primary-border-subtle: #93c5fd;

    /* Secondary — Dark alley interior slate */
    --bs-secondary: #475569;
    --bs-secondary-rgb: 71, 85, 105;
    --bs-secondary-text-emphasis: #1e293b;
    --bs-secondary-bg-subtle: #e2e8f0;
    --bs-secondary-border-subtle: #94a3b8;

    /* Success — Strike "X" on the scorecard */
    --bs-success: #16a34a;
    --bs-success-rgb: 22, 163, 74;
    --bs-success-text-emphasis: #0a5c2a;
    --bs-success-bg-subtle: #dcfce7;
    --bs-success-border-subtle: #86efac;

    /* Info — Oil sheen on a freshly conditioned lane */
    --bs-info: #0891b2;
    --bs-info-rgb: 8, 145, 178;
    --bs-info-text-emphasis: #044e60;
    --bs-info-bg-subtle: #cffafe;
    --bs-info-border-subtle: #67e8f9;

    /* Warning — Trophy gold / tournament banners */
    --bs-warning: #eab308;
    --bs-warning-rgb: 234, 179, 8;
    --bs-warning-text-emphasis: #713f12;
    --bs-warning-bg-subtle: #fef9c3;
    --bs-warning-border-subtle: #fde047;

    /* Danger — Foul line / gutter warning */
    --bs-danger: #dc2626;
    --bs-danger-rgb: 220, 38, 38;
    --bs-danger-text-emphasis: #7f1d1d;
    --bs-danger-bg-subtle: #fee2e2;
    --bs-danger-border-subtle: #fca5a5;

    /* Links */
    --bs-link-color: #2563eb;
    --bs-link-color-rgb: 37, 99, 235;
    --bs-link-hover-color: #1d4ed8;
    --bs-link-hover-color-rgb: 29, 78, 216;

    /* Surface & border tints — blue-tinted to soften harsh whites */
    --bs-body-bg: #f8fafc;
    --bs-body-bg-rgb: 248, 250, 252;
    --bs-tertiary-bg: #f1f5f9;
    --bs-tertiary-bg-rgb: 241, 245, 249;
    --bs-secondary-bg: #e2e8f0;
    --bs-secondary-bg-rgb: 226, 232, 240;
    --bs-border-color: #cbd5e1;
    --bs-border-color-translucent: rgba(148, 163, 184, 0.25);
}

[data-bs-theme="dark"] {
    /* Primary */
    --bs-primary: #2563eb;
    --bs-primary-rgb: 37, 99, 235;
    --bs-primary-text-emphasis: #93c5fd;
    --bs-primary-bg-subtle: #1e3a5f;
    --bs-primary-border-subtle: #1e40af;

    /* Secondary */
    --bs-secondary: #475569;
    --bs-secondary-rgb: 71, 85, 105;
    --bs-secondary-text-emphasis: #cbd5e1;
    --bs-secondary-bg-subtle: #1e293b;
    --bs-secondary-border-subtle: #334155;

    /* Success */
    --bs-success: #16a34a;
    --bs-success-rgb: 22, 163, 74;
    --bs-success-text-emphasis: #86efac;
    --bs-success-bg-subtle: #052e16;
    --bs-success-border-subtle: #14532d;

    /* Info */
    --bs-info: #0891b2;
    --bs-info-rgb: 8, 145, 178;
    --bs-info-text-emphasis: #67e8f9;
    --bs-info-bg-subtle: #083344;
    --bs-info-border-subtle: #155e75;

    /* Warning */
    --bs-warning: #eab308;
    --bs-warning-rgb: 234, 179, 8;
    --bs-warning-text-emphasis: #fde047;
    --bs-warning-bg-subtle: #422006;
    --bs-warning-border-subtle: #713f12;

    /* Danger */
    --bs-danger: #dc2626;
    --bs-danger-rgb: 220, 38, 38;
    --bs-danger-text-emphasis: #fca5a5;
    --bs-danger-bg-subtle: #450a0a;
    --bs-danger-border-subtle: #7f1d1d;

    /* Links */
    --bs-link-color: #60a5fa;
    --bs-link-color-rgb: 96, 165, 250;
    --bs-link-hover-color: #93c5fd;
    --bs-link-hover-color-rgb: 147, 197, 253;

    /* Surface & border — re-assert Bootstrap dark defaults
       (the :root block above overrides them with light values) */
    --bs-body-bg: #212529;
    --bs-body-bg-rgb: 33, 37, 41;
    --bs-tertiary-bg: #2b3035;
    --bs-tertiary-bg-rgb: 43, 48, 53;
    --bs-secondary-bg: #343a40;
    --bs-secondary-bg-rgb: 52, 58, 64;
    --bs-border-color: #495057;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
}

/* ============================================================
   Button overrides — Bootstrap 5.3 buttons use scoped
   --bs-btn-* variables that don't inherit from :root
   ============================================================ */

/* Primary button */
.btn-primary {
    --bs-btn-bg: #2563eb;
    --bs-btn-border-color: #2563eb;
    --bs-btn-hover-bg: #1d4ed8;
    --bs-btn-hover-border-color: #1e40af;
    --bs-btn-active-bg: #1e40af;
    --bs-btn-active-border-color: #1e3a8a;
    --bs-btn-disabled-bg: #2563eb;
    --bs-btn-disabled-border-color: #2563eb;
}

/* Secondary button */
.btn-secondary {
    --bs-btn-bg: #475569;
    --bs-btn-border-color: #475569;
    --bs-btn-hover-bg: #334155;
    --bs-btn-hover-border-color: #1e293b;
    --bs-btn-active-bg: #1e293b;
    --bs-btn-active-border-color: #0f172a;
    --bs-btn-disabled-bg: #475569;
    --bs-btn-disabled-border-color: #475569;
}

/* Success button */
.btn-success {
    --bs-btn-bg: #16a34a;
    --bs-btn-border-color: #16a34a;
    --bs-btn-hover-bg: #15803d;
    --bs-btn-hover-border-color: #166534;
    --bs-btn-active-bg: #166534;
    --bs-btn-active-border-color: #14532d;
    --bs-btn-disabled-bg: #16a34a;
    --bs-btn-disabled-border-color: #16a34a;
}

/* Info button */
.btn-info {
    --bs-btn-bg: #0891b2;
    --bs-btn-border-color: #0891b2;
    --bs-btn-hover-bg: #0e7490;
    --bs-btn-hover-border-color: #155e75;
    --bs-btn-active-bg: #155e75;
    --bs-btn-active-border-color: #164e63;
    --bs-btn-disabled-bg: #0891b2;
    --bs-btn-disabled-border-color: #0891b2;
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
}

/* Warning button */
.btn-warning {
    --bs-btn-bg: #eab308;
    --bs-btn-border-color: #eab308;
    --bs-btn-hover-bg: #ca8a04;
    --bs-btn-hover-border-color: #a16207;
    --bs-btn-active-bg: #a16207;
    --bs-btn-active-border-color: #854d0e;
    --bs-btn-disabled-bg: #eab308;
    --bs-btn-disabled-border-color: #eab308;
}

/* Danger button */
.btn-danger {
    --bs-btn-bg: #dc2626;
    --bs-btn-border-color: #dc2626;
    --bs-btn-hover-bg: #b91c1c;
    --bs-btn-hover-border-color: #991b1b;
    --bs-btn-active-bg: #991b1b;
    --bs-btn-active-border-color: #7f1d1d;
    --bs-btn-disabled-bg: #dc2626;
    --bs-btn-disabled-border-color: #dc2626;
}

/* Darken floating label placeholders (Bootstrap default is 0.65) */
.form-floating > label {
    color: rgba(var(--bs-body-color-rgb), 0.45);
}

/* ============================================================
   Original app styles
   ============================================================ */

.validation-summary-valid {
    display: none;
}

.validation-summary-errors ul {
    margin-bottom: 0;
}

/* Validation error styles */
.input-validation-error {
    border: 5px var(--bs-danger-border-subtle) solid;
}

.prose {
    max-width: none;
}

.prose h1 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.prose h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.prose h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.prose p {
    margin-bottom: 1rem;
}

.prose ul, .prose ol {
    margin-bottom: 1rem;
    padding-left: 2rem;
}

.prose li {
    margin-bottom: 0.5rem;
}

.prose a {
    color: var(--bs-link-color);
    text-decoration: underline;
}

.prose code {
    background-color: var(--bs-secondary-bg);
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 0.875em;
}

.prose pre {
    background-color: var(--bs-secondary-bg);
    padding: 1rem;
    border-radius: 0.375rem;
    overflow-x: auto;
    margin-bottom: 1rem;
}

.prose pre code {
    background-color: transparent;
    padding: 0;
}

/* Sortable list styles */
.sortable-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sortable-list-item {
    background-color: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
    transition: background-color 0.15s ease;
}

.sortable-list-item:hover {
    background-color: var(--bs-tertiary-bg);
}

.clickable-row {
    cursor: pointer;
}

.clickable-row:hover {
    color: inherit;
}

.card-lift {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-lift:hover {
    transform: translateY(-4px) scale(1.0125);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.kpi-filter {
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.kpi-filter.active {
    opacity: 1;
}

.kpi-filter:hover {
    opacity: 0.85;
}

.kpi-filter.active:hover {
    opacity: 1;
}

.sortable-list-item.draggable-mirror {
    list-style: none;
    background-color: var(--bs-body-bg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 0.375rem;
    border: 1px solid var(--bs-border-color);
    z-index: 1000;
}

.sortable-list-item.draggable-source--is-dragging {
    opacity: 0.4;
}

/* Readonly form controls should look disabled */
input.form-control:read-only {
    background-color: var(--bs-secondary-bg);
}

/* Toast notifications */
#toastContainer {
    z-index: 1080;
}

#toastContainer .toast {
    min-width: 350px;
    max-width: 500px;
    font-size: 1rem;
    padding: 0.25rem;
}

/* PayPal button container — give a light inset in dark mode so PayPal's
   white iframe backgrounds look intentional rather than broken */
[data-bs-theme="dark"] .paypal-container {
    background-color: #f0f0f0;
    border-radius: 0.5rem;
    padding: 1rem;
}

/* Override table-light to a more visible medium gray */
.table-light,
.table-light > th,
.table-light > td {
    --bs-table-bg: #d5d8dc;
    --bs-table-color: #212529;
}

[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table-light > th,
[data-bs-theme="dark"] .table-light > td {
    --bs-table-bg: #3a3f47;
    --bs-table-color: #dee2e6;
}

/* Confirmation modal must sit above all other modals and backdrops */
#confirmActionModal { z-index: 1090; }