/**
 * Universal surface bindings - every UI layer reads CSS variables
 * set by theme-vars.php from the active preset.
 */

body {
    background-color: var(--bg-base, var(--body-bg));
    color: var(--text-primary);
}

/* Layered surfaces */
.card,
.profile-setting-section,
.profile-module-header,
.modal-content,
.dropdown-menu,
.accordion-item,
.list-group-item,
.offcanvas,
.offcanvas-body {
    background-color: var(--bg-card) !important;
    color: var(--text-primary);
    border-color: var(--border-subtle) !important;
}

/* Header uses chrome (readable text in light + dark) */
.app-header,
.app-header-bubble {
    background: var(--chrome-bg, var(--bg-chrome, var(--bg-card))) !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-primary) !important;
}

/* Side / bottom nav use brand nav tokens (not chrome) */
.app-sidebar,
.app-bottom-nav,
.mobile-bottom-nav {
    background: var(--nav-bg) !important;
    border-color: var(--nav-border) !important;
    color: var(--nav-fg) !important;
}

.app-sidebar-nav .nav-link.active,
.app-bottom-nav a.active {
    background: transparent !important;
}

.bg-white,
.card-header.bg-white,
.bg-light,
.bg-light-subtle,
.bg-body,
.bg-body-tertiary,
.bg-body-secondary {
    background-color: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-subtle) !important;
}

.text-dark,
.text-body,
.text-body-emphasis,
h1, h2, h3, h4, h5, h6,
.fw-bold.text-dark,
label,
.form-label,
.col-form-label {
    color: var(--text-primary) !important;
}

.text-muted,
.text-secondary,
.text-body-secondary,
.form-text,
.small.text-muted,
.form-control::placeholder,
.form-select option:disabled {
    color: var(--text-muted) !important;
}

.form-control,
.form-select,
.form-control:focus,
.form-select:focus,
.input-group-text {
    background-color: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-subtle) !important;
}

.form-control:disabled,
.form-select:disabled {
    background-color: var(--bg-elevated, var(--bg-surface)) !important;
    color: var(--text-muted) !important;
}

.table {
    --bs-table-color: var(--text-primary);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--border-subtle);
    --bs-table-striped-bg: rgba(var(--primary-rgb), 0.04);
    --bs-table-hover-bg: rgba(var(--primary-rgb), 0.06);
    color: var(--text-primary);
}

.table-light {
    --bs-table-bg: var(--bg-surface);
    --bs-table-color: var(--text-primary);
}

/* Buttons */
.btn-primary,
.btn-success {
    color: var(--on-primary) !important;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.btn-outline-primary,
.btn-outline-success {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    background: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-success:hover,
.btn-outline-primary:active,
.btn-outline-success:active,
.btn-outline-primary:focus,
.btn-outline-success:focus {
    color: var(--on-primary) !important;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.btn-light,
.btn-outline-secondary,
.btn-secondary {
    color: var(--text-primary) !important;
    background-color: var(--bg-surface) !important;
    border-color: var(--border-subtle) !important;
}

.btn-light:hover,
.btn-outline-secondary:hover,
.btn-secondary:hover {
    color: var(--text-primary) !important;
    background-color: var(--bg-elevated, var(--bg-surface)) !important;
    border-color: var(--border-subtle) !important;
}

.btn-close {
    filter: var(--btn-close-filter, none);
}

html.theme-dark .btn-close {
    filter: invert(1) grayscale(100%);
    opacity: 0.75;
}

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

.nav-tabs {
    border-color: var(--border-subtle);
}

.nav-tabs .nav-link {
    color: var(--text-muted);
}

.nav-tabs .nav-link.active {
    color: var(--text-primary);
    background-color: var(--bg-card);
    border-color: var(--border-subtle) var(--border-subtle) var(--bg-card);
}

.nav-pills .nav-link {
    color: var(--text-primary);
}

.nav-pills .nav-link.active {
    background-color: var(--primary-color);
    color: var(--on-primary) !important;
}

.page-link {
    color: var(--primary-color);
    background-color: var(--bg-card);
    border-color: var(--border-subtle);
}

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

.page-item.disabled .page-link {
    color: var(--text-muted);
    background-color: var(--bg-surface);
}

.alert {
    color: var(--text-primary);
    border-color: var(--border-subtle);
}

.alert-success {
    background-color: rgba(var(--primary-rgb), 0.12);
    border-color: rgba(var(--primary-rgb), 0.28);
    color: var(--text-primary);
}

.dropdown-item {
    color: var(--text-primary);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(var(--primary-rgb), 0.08);
    color: var(--text-primary);
}

.dropdown-divider {
    border-color: var(--border-subtle);
}

/* Content links (not shell nav) */
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.header-menu-item):not(.app-bottom-nav a) {
    color: var(--primary-color);
}

hr {
    border-color: var(--border-subtle);
    opacity: 1;
}

.border,
.border-top,
.border-bottom,
.border-start,
.border-end {
    border-color: var(--border-subtle) !important;
}