/* Bootstrap variables */
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bs-body-bg: var(--fh-bg);
    --bs-body-color: var(--fh-text);
    --bs-secondary-color: var(--fh-text-muted);
    --bs-tertiary-color: var(--fh-text-muted);
    --bs-secondary-bg: var(--fh-bg-secondary);
    --bs-tertiary-bg: var(--fh-bg-secondary);
    --bs-emphasis-color: var(--fh-text);
    --bs-border-color: var(--fh-border);
    --bs-border-color-translucent: var(--fh-border-soft);
    --bs-primary: var(--fh-primary);
    --bs-success: var(--fh-success);
    --bs-warning: var(--fh-warning);
    --bs-danger: var(--fh-danger);
    --bs-info: var(--fh-info);
}

.text-secondary,
.text-muted {
    color: var(--fh-text-muted) !important;
}

.text-body-secondary {
    color: var(--fh-text-secondary) !important;
}

.text-body-tertiary {
    color: var(--fh-text-muted) !important;
}

/* Bootstrap utility legacy */
[data-fh-theme="dark"] .bg-white {
    background-color: var(--fh-surface) !important;
}

[data-fh-theme="dark"] .bg-light {
    background-color: var(--fh-bg-secondary) !important;
}

[data-fh-theme="dark"] .text-dark {
    color: var(--fh-text) !important;
}

[data-fh-theme="dark"] .text-body {
    color: var(--fh-text) !important;
}

[data-fh-theme="dark"] .border,
[data-fh-theme="dark"] .border-top,
[data-fh-theme="dark"] .border-bottom,
[data-fh-theme="dark"] .border-start,
[data-fh-theme="dark"] .border-end {
    border-color: var(--fh-border) !important;
}

/* Navbar */
.navbar.bg-dark {
    background: var(--fh-navbar-bg) !important;
    border-bottom: 1px solid var(--fh-navbar-border);
}

.navbar .navbar-brand {
    color: var(--fh-navbar-text) !important;
}

.navbar .btn-outline-light {
    color: var(--fh-navbar-text);
    border-color: color-mix(in srgb, var(--fh-navbar-text) 65%, transparent);
    background: transparent;
}

.navbar .btn-outline-light:hover,
.navbar .btn-outline-light:focus {
    color: var(--fh-navbar-text);
    background: rgba(255, 255, 255, .1);
    border-color: var(--fh-navbar-text);
}

/* Sidebar */
#mainSidebar {
    background: var(--fh-surface);
    color: var(--fh-text);
    border-right-color: var(--fh-border);
}

#mainSidebar .offcanvas-header.bg-dark {
    background: var(--fh-navbar-bg) !important;
    color: var(--fh-navbar-text) !important;
    border-bottom: 1px solid var(--fh-navbar-border);
}

#mainSidebar .offcanvas-body {
    background: var(--fh-surface);
}

#mainSidebar .list-group-item {
    color: var(--fh-text);
    background: transparent;
    border-color: var(--fh-divider);
}

#mainSidebar .list-group-item:hover,
#mainSidebar .list-group-item:focus {
    color: var(--fh-text);
    background: var(--fh-surface-hover);
}

#mainSidebar .list-group-item:active {
    background: var(--fh-surface-active);
}

/* Buttons */
.btn {
    min-height: var(--fh-control-height);
    border-radius: var(--fh-radius-sm);
    font-weight: 700;
    box-shadow: none;
    transition: background-color var(--fh-transition-fast), border-color var(--fh-transition-fast), color var(--fh-transition-fast), box-shadow var(--fh-transition-fast), transform var(--fh-transition-fast);
}

.btn:hover {
    box-shadow: var(--fh-shadow-sm);
}

.btn:active {
    transform: scale(.98);
}

.btn:focus-visible {
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--fh-primary) 24%, transparent);
}

.btn-primary {
    --bs-btn-bg: var(--fh-primary);
    --bs-btn-border-color: var(--fh-primary);
    --bs-btn-color: var(--fh-primary-contrast);
    --bs-btn-hover-bg: var(--fh-primary-hover);
    --bs-btn-hover-border-color: var(--fh-primary-hover);
    --bs-btn-hover-color: var(--fh-primary-contrast);
    --bs-btn-active-bg: var(--fh-primary-active);
    --bs-btn-active-border-color: var(--fh-primary-active);
    --bs-btn-active-color: var(--fh-primary-contrast);
}

.btn-outline-primary {
    --bs-btn-color: var(--fh-primary);
    --bs-btn-border-color: var(--fh-primary);
    --bs-btn-hover-bg: var(--fh-primary);
    --bs-btn-hover-border-color: var(--fh-primary);
    --bs-btn-hover-color: var(--fh-primary-contrast);
}

.btn-success {
    --bs-btn-bg: var(--fh-success);
    --bs-btn-border-color: var(--fh-success);
}

.btn-danger {
    --bs-btn-bg: var(--fh-danger);
    --bs-btn-border-color: var(--fh-danger);
}

.btn {
    --bs-btn-focus-box-shadow: none;
}

.btn:focus,
.btn:focus-visible,
.btn:active,
.btn.active,
.btn.show {
    box-shadow: none !important;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-primary:active,
.btn-primary.active,
.btn-primary.show {
    color: var(--fh-primary-contrast) !important;
    background-color: var(--fh-primary) !important;
    border-color: var(--fh-primary) !important;
}

.btn-primary:hover {
    background-color: var(--fh-primary-hover) !important;
    border-color: var(--fh-primary-hover) !important;
}

.btn-primary:active,
.btn-primary.active,
.btn-primary.show {
    background-color: var(--fh-primary-active) !important;
    border-color: var(--fh-primary-active) !important;
}

.btn-outline-primary {
    color: var(--fh-primary);
    background: transparent;
    border-color: var(--fh-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:focus-visible {
    color: var(--fh-primary-contrast) !important;
    background-color: var(--fh-primary-hover) !important;
    border-color: var(--fh-primary-hover) !important;
}

.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.show {
    color: var(--fh-primary-contrast) !important;
    background-color: var(--fh-primary-active) !important;
    border-color: var(--fh-primary-active) !important;
}

.btn-success:focus,
.btn-success:focus-visible,
.btn-success:active,
.btn-success.active {
    color: #fff !important;
    background-color: var(--fh-success) !important;
    border-color: var(--fh-success) !important;
}

.btn-danger:focus,
.btn-danger:focus-visible,
.btn-danger:active,
.btn-danger.active {
    color: #fff !important;
    background-color: var(--fh-danger) !important;
    border-color: var(--fh-danger) !important;
}

/* Cards */
.card {
    --bs-card-bg: var(--fh-surface);
    --bs-card-color: var(--fh-text);
    --bs-card-border-color: var(--fh-border-soft);
    background: var(--fh-surface);
    color: var(--fh-text);
    border: 1px solid var(--fh-border-soft);
    border-radius: var(--fh-radius-md);
    box-shadow: var(--fh-shadow-sm);
}

.card.shadow-sm {
    box-shadow: var(--fh-shadow-sm) !important;
}

.card-header {
    color: var(--fh-text);
    background: var(--fh-surface);
    border-bottom: 1px solid var(--fh-divider);
    border-radius: var(--fh-radius-md) var(--fh-radius-md) 0 0 !important;
}

.card-header.bg-white {
    background: var(--fh-surface) !important;
}

.card-footer {
    color: var(--fh-text);
    background: var(--fh-surface);
    border-top: 1px solid var(--fh-divider);
}

/* Forms */
.form-control,
.form-select {
    min-height: var(--fh-control-height);
    color: var(--fh-text);
    background-color: var(--fh-surface);
    border: 1px solid var(--fh-border);
    border-radius: var(--fh-radius-sm);
    box-shadow: none;
}

.form-control::placeholder {
    color: var(--fh-text-muted);
    opacity: .75;
}

.form-control:focus,
.form-select:focus {
    color: var(--fh-text);
    background-color: var(--fh-surface);
    border-color: var(--fh-primary);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--fh-primary) 18%, transparent);
}

.form-control:disabled,
.form-select:disabled {
    color: var(--fh-text-disabled);
    background: var(--fh-bg-secondary);
    opacity: .8;
}

.form-check-input {
    background-color: var(--fh-surface);
    border-color: var(--fh-border);
}

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

.form-check-input:focus {
    border-color: var(--fh-primary);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--fh-primary) 18%, transparent);
}

.form-label {
    color: var(--fh-text);
    font-weight: 600;
}

.input-group-text {
    color: var(--fh-text-secondary);
    background: var(--fh-bg-secondary);
    border-color: var(--fh-border);
}

/* Tables */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--fh-text);
    --bs-table-border-color: var(--fh-border);
    --bs-table-striped-bg: color-mix(in srgb, var(--fh-surface-hover) 70%, transparent);
    --bs-table-striped-color: var(--fh-text);
    --bs-table-hover-bg: var(--fh-surface-hover);
    --bs-table-hover-color: var(--fh-text);
    margin-bottom: 0;
}

.table> :not(caption)>*>* {
    padding: .65rem .75rem;
    border-bottom-color: var(--fh-border);
}

.table thead th {
    color: var(--fh-text-secondary);
    font-size: .8rem;
    font-weight: 800;
    vertical-align: middle;
}

/* Modal */
.modal-content {
    color: var(--fh-text);
    background: var(--fh-surface);
    border: 1px solid var(--fh-border);
    border-radius: var(--fh-radius-lg);
    box-shadow: var(--fh-shadow-lg);
}

.modal-header,
.modal-footer {
    border-color: var(--fh-divider);
}

.modal-title {
    font-weight: 800;
}

/* Dropdown */
.dropdown-menu {
    --bs-dropdown-bg: var(--fh-surface-elevated);
    --bs-dropdown-color: var(--fh-text);
    --bs-dropdown-border-color: var(--fh-border);
    --bs-dropdown-link-color: var(--fh-text);
    --bs-dropdown-link-hover-color: var(--fh-text);
    --bs-dropdown-link-hover-bg: var(--fh-surface-hover);
    --bs-dropdown-link-active-bg: var(--fh-primary);
    padding: .35rem;
    border-radius: var(--fh-radius-md);
    box-shadow: var(--fh-shadow-md);
}

.dropdown-item {
    min-height: 38px;
    display: flex;
    align-items: center;
    color: var(--fh-text);
    border-radius: var(--fh-radius-sm);
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--fh-text);
    background: var(--fh-surface-hover);
}

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

/* Offcanvas */
.offcanvas {
    --bs-offcanvas-bg: var(--fh-surface);
    --bs-offcanvas-color: var(--fh-text);
    border-color: var(--fh-border);
}

/* Tabs */
.nav-tabs {
    border-bottom-color: var(--fh-border);
}

.nav-tabs .nav-link {
    color: var(--fh-text-muted);
    border-radius: var(--fh-radius-sm) var(--fh-radius-sm) 0 0;
    font-weight: 700;
}

.nav-tabs .nav-link:hover {
    color: var(--fh-text);
    border-color: transparent;
}

.nav-tabs .nav-link.active {
    color: var(--fh-text);
    background: var(--fh-surface);
    border-color: var(--fh-border) var(--fh-border) var(--fh-surface);
}

.navbar #btnThemeToggle,
.navbar .dropdown>.btn {
    width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.navbar #btnThemeToggle i {
    transition: transform var(--fh-transition-fast), opacity var(--fh-transition-fast);
}

.navbar #btnThemeToggle:active i {
    transform: scale(.88);
}

@media (max-width: 575.98px) {

    .navbar #btnThemeToggle,
    .navbar .dropdown>.btn {
        width: 38px;
        height: 38px;
        min-height: 38px;
    }
}

/* List group */
.list-group {
    --bs-list-group-bg: var(--fh-surface);
    --bs-list-group-color: var(--fh-text);
    --bs-list-group-border-color: var(--fh-border);
    --bs-list-group-action-hover-bg: var(--fh-surface-hover);
    --bs-list-group-action-hover-color: var(--fh-text);
    --bs-list-group-action-active-bg: var(--fh-surface-active);
    --bs-list-group-action-active-color: var(--fh-text);
}

/* Alerts Bootstrap */
.alert {
    border-radius: var(--fh-radius-md);
}

/* Badge */
.badge {
    border-radius: var(--fh-radius-pill);
    font-weight: 700;
}

/* Accordion */
.accordion {
    --bs-accordion-bg: var(--fh-surface);
    --bs-accordion-color: var(--fh-text);
    --bs-accordion-border-color: var(--fh-border);
    --bs-accordion-btn-bg: var(--fh-surface);
    --bs-accordion-btn-color: var(--fh-text);
    --bs-accordion-active-bg: var(--fh-surface-hover);
    --bs-accordion-active-color: var(--fh-text);
}

/* Pagination */
.pagination {
    --bs-pagination-bg: var(--fh-surface);
    --bs-pagination-color: var(--fh-text);
    --bs-pagination-border-color: var(--fh-border);
    --bs-pagination-hover-bg: var(--fh-surface-hover);
    --bs-pagination-hover-color: var(--fh-text);
    --bs-pagination-hover-border-color: var(--fh-border);
    --bs-pagination-active-bg: var(--fh-primary);
    --bs-pagination-active-border-color: var(--fh-primary);
}

/* Progress */
.progress {
    background: var(--fh-bg-secondary);
    border-radius: var(--fh-radius-pill);
}

.progress-bar {
    background: var(--fh-primary);
}

/* Spinner */
.spinner-border,
.spinner-grow {
    color: var(--fh-primary);
}

/* Mobile / touch */
@media (max-width: 767.98px) {

    .btn:not(.btn-sm),
    .form-control,
    .form-select,
    .dropdown-item {
        min-height: var(--fh-touch-target);
    }

    .modal-dialog {
        margin: .6rem;
    }

    .card-body {
        padding: .9rem;
    }
}