/* Nooomer — layout polish on top of Bootstrap */

/*
 * Kilua injects k-style / component CSS via main.bundle-css.js after these files,
 * which can force dark table backgrounds and light text. Rules below pin a
 * consistent light UI (high specificity + key overrides).
 */

:root {
    --app-page-bg: #f4f7f5;
    --app-card-radius: 0.5rem;
}

html {
    scroll-behavior: smooth;
    color-scheme: light;
}

body {
    min-height: 100vh;
    background: var(--app-page-bg);
    color: #212529;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Force light tables/cards inside app root (overrides injected Kilua styles) --- */

#root .table {
    --bs-table-bg: #fff;
    --bs-table-color: #212529;
    --bs-table-striped-bg: rgba(0, 0, 0, 0.03);
    --bs-table-hover-bg: rgba(0, 0, 0, 0.06);
    --bs-table-active-bg: rgba(0, 0, 0, 0.08);
    color: #212529;
    border-color: #dee2e6;
}

#root .table > :not(caption) > * > * {
    color: inherit;
}

#root .table thead th,
#root .table thead td {
    color: #343a40 !important;
    background-color: #e9ecef !important;
    border-color: #dee2e6 !important;
}

#root .table tbody tr > * {
    color: #212529 !important;
    background-color: #fff !important;
    border-color: #dee2e6 !important;
}

#root .table tbody tr a {
    color: #0d6efd !important;
}

#root .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: rgba(0, 0, 0, 0.04);
    color: #212529 !important;
    background-color: #f8f9fa !important;
}

#root .table-hover > tbody > tr:hover > * {
    color: #212529 !important;
    background-color: #e9ecef !important;
}

#root .card {
    background-color: #fff !important;
    color: #212529 !important;
}

#root .card-body {
    background-color: #fff !important;
    color: #212529 !important;
}

#root .app-page-title {
    color: #212529 !important;
}

#root .text-muted {
    color: #6c757d !important;
}

/*
 * Kilua modals are often rendered outside #root (portal to body). Dropdowns and
 * some list/form controls can also lose #root-scoped fixes — rules below apply
 * globally under body.
 */

body .modal-content {
    background-color: #fff !important;
    color: #212529 !important;
    border: 1px solid rgba(0, 0, 0, 0.175) !important;
}

body .modal-header,
body .modal-footer {
    background-color: #fff !important;
    color: #212529 !important;
    border-color: #dee2e6 !important;
}

body .modal-body {
    background-color: #fff !important;
    color: #212529 !important;
}

/* Kilua vPanel / flex children often keep a gray computed color — force readable text */
body .modal-content,
body .modal-content * {
    color: #212529 !important;
}

body .modal-content a,
body .modal-content a * {
    color: #0d6efd !important;
}

body .modal-content .text-muted,
body .modal-content .small.text-muted {
    color: #6c757d !important;
}

body .modal-footer .link-primary,
body .modal-content .link-primary {
    color: #0d6efd !important;
}

/* Some Kilua/Bootstrap builds attach dialogs with role=dialog without .modal-* */
body [role="dialog"] .modal-content,
body .modal[role="dialog"] .modal-content {
    background-color: #fff !important;
    color: #212529 !important;
}

body .modal-dialog {
    color: #212529 !important;
}

body .modal-title {
    color: #212529 !important;
}

body .btn-close {
    filter: none !important;
    opacity: 0.6;
}

body .dropdown-menu {
    background-color: #fff !important;
    color: #212529 !important;
    border: 1px solid #dee2e6 !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

body .dropdown-item {
    color: #212529 !important;
}

body .dropdown-item:hover,
body .dropdown-item:focus {
    background-color: #f8f9fa !important;
    color: #212529 !important;
}

body .dropdown-divider {
    border-color: #dee2e6 !important;
}

/* List groups: home player list, settings sidebar */
#root .list-group-item,
body .list-group-item {
    background-color: #fff !important;
    color: #212529 !important;
    border-color: rgba(0, 0, 0, 0.125) !important;
}

#root .list-group-item.active,
body .list-group-item.active {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    color: #fff !important;
}

#root .list-group-item-action:hover,
body .list-group-item-action:hover {
    background-color: #f8f9fa !important;
    color: #212529 !important;
}

#root .list-group-item a,
body .list-group-item a {
    color: #0d6efd !important;
}

#root .list-group-item.disabled,
body .list-group-item.disabled {
    background-color: #e9ecef !important;
    color: #6c757d !important;
}

/* Forms (settings, login) */
body .form-control,
#root .form-control {
    background-color: #fff !important;
    color: #212529 !important;
    border-color: #ced4da !important;
}

body .form-control:disabled,
#root .form-control:disabled {
    background-color: #e9ecef !important;
    color: #495057 !important;
}

body .form-label,
#root .form-label {
    color: #212529 !important;
}

/* Slightly tighter tables on small screens */
.table-responsive {
    border-radius: var(--app-card-radius);
}

/* Leaderboard: keep long names readable */
.leaderboard-item-name {
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .leaderboard-item-name {
        max-width: 24rem;
    }
}

/* Loading / empty helpers */
.app-loading {
    letter-spacing: 0.02em;
}

.app-page-title {
    font-weight: 600;
    letter-spacing: -0.02em;
}