/**
 * Theme base: bind elements to design tokens.
 * When no theme is selected, Espire defaults below apply. When user selects a theme
 * (from theme generator), its CSS loads after this and overrides these variables.
 */

/* Espire default – applied when no theme overlay is loaded */
:root,
[data-bs-theme="light"] {
  --app-bg: #f3f7f9;
  --app-surface: #ffffff;
  --app-surface-elevated: #ebf3f8;
  --app-text: #486f88;
  --app-text-muted: #7d9eb5;
  --app-headings-color: #00174c;
  --app-border: #edf4f9;
  --app-primary: #11a1fd;
  --app-primary-hover: #0d8de8;
  --app-input-bg: #ffffff;
  --app-link-color: #11a1fd;
  --app-link-hover: #0d8de8;
  --app-table-header-bg: #ebf3f8;
  --app-table-header-color: #486f88;
  --app-side-nav-bg: #ffffff;
  --app-side-nav-border: #edf4f9;
  --app-side-nav-item-color: #7d9eb5;
  --app-side-nav-hover-bg: #ebf3f8;
  --app-side-nav-hover-color: #486f88;
  --app-side-nav-group-color: #7d9eb5;
  --app-header-bg: #ffffff;
  --app-header-border: #edf4f9;
  --app-header-text: #486f88;
  --app-header-hover-bg: #ebf3f8;
  --app-header-dropdown-bg: #ffffff;
  --app-header-dropdown-border: #edf4f9;
  --app-header-dropdown-item: #486f88;
  --app-header-dropdown-item-hover-bg: #ebf3f8;
  --app-header-dropdown-item-hover: #486f88;
  --bs-primary: #11a1fd;
  --bs-secondary: #e4eef5;
  --bs-success: #00c569;
  --bs-info: #5a75f9;
  --bs-warning: #ff9842;
  --bs-danger: #f46363;
  --bs-light: #f3f7f9;
  --bs-dark: #343a40;
  --bs-primary-rgb: 17, 161, 253;
  --bs-secondary-rgb: 228, 238, 245;
  --bs-success-rgb: 0, 197, 105;
  --bs-info-rgb: 90, 117, 249;
  --bs-warning-rgb: 255, 152, 66;
  --bs-danger-rgb: 244, 99, 99;
  --bs-light-rgb: 243, 247, 249;
  --bs-dark-rgb: 52, 58, 64;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.page-title h4,
.card-title,
.modal-title {
  color: var(--app-headings-color);
}

/* Body and main content */
body {
  color: var(--app-text);
  background-color: var(--app-bg);
}

.content,
.main {
  background-color: var(--app-bg);
}

.card-body,
.modal-body {
  color: var(--app-text);
}

/* Muted text */
.text-muted,
small.text-muted {
  color: var(--app-text-muted);
}

.text-dark {
  color: var(--app-text) !important;
}

/* Cards */
.card {
  background-color: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-text);
}

.card-header {
  background-color: var(--app-surface-elevated);
  border-bottom-color: var(--app-border);
  color: var(--app-text);
}

/* Danger/primary-style headers: force white text on headings so theme-base h5/.modal-title does not override */
.card-header.bg-danger h5,
.card-header.bg-danger .card-title,
.modal-header.bg-danger .modal-title,
.modal-header.bg-danger h5 {
  color: #fff !important;
}

/* Forms – use --app-input-bg (theme can set; fallback surface-elevated) */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
textarea {
  background-color: var(--app-input-bg, var(--app-surface-elevated));
  border-color: var(--app-border);
  color: var(--app-text);
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus {
  background-color: var(--app-input-bg, var(--app-surface-elevated));
  border-color: var(--app-primary);
  color: var(--app-text);
}

.form-label,
.form-check-label {
  color: var(--app-text);
}

/* Checkbox/radio checked and focus use primary (Bootstrap default is hardcoded blue) */
.form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.form-check-input[type=checkbox]:indeterminate {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.form-check-input:focus {
  border-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.5);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb, 13, 110, 253), 0.25);
}

.input-group-text {
  background-color: var(--app-input-bg, var(--app-surface-elevated)) !important;
  border-color: var(--app-border) !important;
  color: var(--app-text) !important;
}

.input-group-text[style*="background: transparent"],
.input-group-text[style*="background:transparent"] {
  background-color: transparent !important;
  border-color: transparent !important;
}

/* Tables */
.table {
  color: var(--app-text);
}

.table-hover tbody tr:hover {
  background-color: var(--app-surface-elevated);
  color: var(--app-text);
}

.table thead th,
.table.table-light thead th {
  background-color: var(--app-table-header-bg, var(--app-surface-elevated)) !important;
  border-bottom-color: var(--app-border);
  color: var(--app-table-header-color, var(--app-text)) !important;
}

.table.table-light thead {
  background-color: var(--app-table-header-bg, var(--app-surface-elevated)) !important;
}

.table td,
.table th {
  border-top-color: var(--app-border);
}

/* Modals */
.modal-content {
  background-color: var(--app-surface);
  border-color: var(--app-border);
}

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

.modal-footer {
  border-top-color: var(--app-border);
}

/* Dropdowns */
.dropdown-menu {
  background-color: var(--app-surface);
  border-color: var(--app-border);
}

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

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

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

/* Alerts */
.alert {
  background-color: var(--app-surface-elevated);
  border-color: var(--app-border);
  color: var(--app-text);
}

.alert-info {
  background-color: var(--app-alert-info-bg, rgba(17, 161, 253, 0.15));
  border-color: var(--app-alert-info-border, rgba(17, 161, 253, 0.3));
  color: var(--app-text);
}

/* Badges – default text from theme */
.badge {
  color: var(--app-badge-color, var(--app-text));
}

/* List groups */
.list-group-item {
  background-color: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-text);
}

.list-group-item:hover {
  background-color: var(--app-surface-elevated);
}

/* Pagination */
.page-link {
  background-color: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-text);
}

.page-link:hover {
  background-color: var(--app-surface-elevated);
  border-color: var(--app-border);
  color: var(--app-text);
}

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

/* Breadcrumbs */
.breadcrumb {
  background-color: var(--app-surface);
}

.breadcrumb-item a {
  color: var(--app-link-color, var(--app-primary));
}

.breadcrumb-item a:hover {
  color: var(--app-link-hover, var(--app-primary-hover));
}

.breadcrumb-item.active {
  color: var(--app-text);
}

/* Toasts */
.toast {
  background-color: var(--app-surface);
  border-color: var(--app-border);
}

.toast-header {
  background-color: var(--app-surface-elevated);
  border-bottom-color: var(--app-border);
  color: var(--app-text);
}

.toast-body {
  color: var(--app-text);
}

/* Colored toasts (danger/success/info): force white text so theme-base does not override */
.toast.bg-danger .toast-header,
.toast.bg-danger .toast-body,
.toast.bg-success .toast-header,
.toast.bg-success .toast-body,
.toast.bg-info .toast-header,
.toast.bg-info .toast-body {
  color: #fff !important;
}

/* Progress bars */
.progress {
  background-color: var(--app-surface-elevated);
}

/* Nav tabs – active tab uses link color (overrides app.min.css default blue) */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--app-link-color, var(--app-primary)) !important;
  border-bottom-color: var(--app-bg) !important;
}

/* Links */
a {
  color: var(--app-link-color, var(--app-primary));
}

a:hover {
  color: var(--app-link-hover, var(--app-primary-hover));
}

.view-file-link,
.text-primary {
  color: var(--app-link-color, var(--app-primary)) !important;
}

.view-file-link:hover {
  color: var(--app-link-hover, var(--app-primary-hover)) !important;
}

/* Borders */
.border,
.border-top,
.border-bottom,
.border-start,
.border-end {
  border-color: var(--app-border) !important;
}

/* Footer */
.footer {
  background-color: var(--app-surface);
  border-top-color: var(--app-border);
  color: var(--app-text);
}

/* Header navigation – uses --app-header-* with fallbacks to shared tokens */
.header-nav,
.header-navbar {
  background-color: var(--app-header-bg, var(--app-surface)) !important;
  border-bottom-color: var(--app-header-border, var(--app-border));
}

.header-nav .header-nav-item,
.header-nav .header-nav-item-select,
.header-nav .nav-icon,
.header-nav .toggle-wrapper,
.header-nav .navbar-text,
.header-nav .fw-bold,
.header-nav.header-text-dark .header-nav-wrap .header-nav-item {
  color: var(--app-header-text, var(--app-text)) !important;
}

.header-nav .header-nav-item-select:hover,
.header-nav .toggle-wrapper:hover {
  background-color: var(--app-header-hover-bg, var(--app-surface-elevated));
}

.header-nav .dropdown-menu {
  background-color: var(--app-header-dropdown-bg, var(--app-surface));
  border-color: var(--app-header-dropdown-border, var(--app-border));
}

.header-nav .dropdown-item {
  color: var(--app-header-dropdown-item, var(--app-text));
}

.header-nav .dropdown-item:hover,
.header-nav .dropdown-item:focus {
  background-color: var(--app-header-dropdown-item-hover-bg, var(--app-surface-elevated));
  color: var(--app-header-dropdown-item-hover, var(--app-text));
}

/* Hamburger / nav-style dropdowns outside header (e.g. account nav): same look as header dropdown, incl. light/dark hover */
.dropdown-menu.dropdown-menu-nav-style {
  background-color: var(--app-header-dropdown-bg, var(--app-surface));
  border-color: var(--app-header-dropdown-border, var(--app-border));
}
.dropdown-menu-nav-style .dropdown-item {
  color: var(--app-header-dropdown-item, var(--app-text));
}
.dropdown-menu-nav-style .dropdown-item:hover,
.dropdown-menu-nav-style .dropdown-item:focus {
  background-color: var(--app-header-dropdown-item-hover-bg, var(--app-surface-elevated));
  color: var(--app-header-dropdown-item-hover, var(--app-text));
}
.dropdown-menu-nav-style .dropdown-item.text-danger:hover,
.dropdown-menu-nav-style .dropdown-item.text-danger:focus {
  color: var(--bs-danger);
}

.header-nav .nav-profile-header {
  border-bottom-color: var(--app-header-border, var(--app-border));
}

/* Side navigation – uses --app-side-nav-* with fallbacks to shared tokens */
.side-nav.nav-menu-light,
.side-nav.nav-menu-dark {
  background-color: var(--app-side-nav-bg, var(--app-surface));
  border-right: 1px solid var(--app-side-nav-border, var(--app-border));
}

.side-nav .nav-menu-item,
.side-nav .nav-submenu-title {
  color: var(--app-side-nav-item-color, var(--app-text-muted));
}

.side-nav .nav-menu-item a,
.side-nav .nav-menu-item i,
.side-nav .nav-submenu-title a,
.side-nav .nav-submenu-title i {
  color: var(--app-side-nav-item-color, var(--app-text-muted));
}

.side-nav .nav-menu-item:hover,
.side-nav .nav-submenu-title:hover {
  background-color: var(--app-side-nav-hover-bg, var(--app-surface-elevated));
  color: var(--app-side-nav-hover-color, var(--app-text));
}

.side-nav .nav-menu-item:hover a,
.side-nav .nav-menu-item:hover i,
.side-nav .nav-submenu-title:hover a,
.side-nav .nav-submenu-title:hover i {
  color: var(--app-side-nav-hover-color, var(--app-text));
}

.side-nav .nav-menu-item.router-link-active {
  background-color: var(--app-side-nav-hover-bg, var(--app-surface-elevated));
}

.side-nav .nav-menu-item.router-link-active a,
.side-nav .nav-menu-item.router-link-active i {
  color: var(--app-side-nav-hover-color, var(--app-text));
}

.side-nav .nav-group-title {
  color: var(--app-side-nav-group-color, var(--app-text-muted));
}

.side-nav .nav-logo {
  border-bottom-color: var(--app-side-nav-border, var(--app-border));
}

.side-nav .mobile-close {
  color: var(--app-side-nav-hover-color, var(--app-text));
}

/* Summernote – uses --bs-body-bg etc when theme sets them */
.note-editor.note-frame {
  background-color: var(--app-surface);
  border-color: var(--app-border) !important;
}

.note-editor.note-frame .note-editable {
  background-color: var(--app-surface);
  color: var(--app-text);
}

.note-editor.note-frame .note-toolbar,
.note-editor.note-frame .note-statusbar {
  background-color: var(--app-surface-elevated) !important;
  border-color: var(--app-border) !important;
}

.note-editor.note-frame .note-btn-group .note-btn {
  background-color: transparent;
  border-color: var(--app-border);
  color: var(--app-text);
}

.note-editor.note-frame .note-btn-group .note-btn:hover {
  background-color: var(--app-surface);
  color: var(--app-text);
}

.note-editor.note-frame .note-dropdown-menu {
  background-color: var(--app-surface-elevated);
  border-color: var(--app-border);
}

.note-editor.note-frame .note-dropdown-item {
  color: var(--app-text);
}

.note-editor.note-frame .note-dropdown-item:hover {
  background-color: var(--app-surface);
  color: var(--app-text);
}

/* Metronome */
.metronome-modal-content,
.metronome-modal-body {
  background-color: var(--app-surface) !important;
  color: var(--app-text) !important;
}

.metronome-title,
.metronome-control-btn,
.metronome-play-btn,
.metronome-tap-button {
  color: var(--app-text) !important;
}

.metronome-tap-button {
  border-color: var(--app-border) !important;
}

.metronome-tempo-input {
  color: var(--app-text) !important;
  border-bottom-color: var(--app-border) !important;
}

.metronome-bpm-label {
  color: var(--app-text-muted) !important;
}

.metronome-save-btn {
  border-color: var(--app-border) !important;
  color: var(--app-text) !important;
  background-color: transparent !important;
}

.metronome-save-btn:hover {
  background-color: var(--app-surface-elevated) !important;
  border-color: var(--app-text) !important;
  color: var(--app-text) !important;
}

.metronome-standalone-container {
  background: var(--app-surface) !important;
}

.metronome-standalone-container h1 {
  color: var(--app-text) !important;
}

.metronome-standalone-container .btn-link.text-dark {
  color: var(--app-text) !important;
}

.metronome-standalone-container input.form-control {
  color: var(--app-text) !important;
  border-bottom-color: var(--app-border) !important;
}

/* Metronome/key play icons – invert on dark backgrounds when --app-icon-invert is set */
#metronomeBtn,
#keyPlayBtn {
  display: inline-block !important;
  visibility: visible !important;
}

img[src*="metronome.svg"] {
  filter: var(--app-icon-invert, none);
  opacity: var(--app-icon-invert-opacity, 1);
}

img[src*="metronome.svg"]:hover {
  filter: var(--app-icon-invert, none);
  opacity: var(--app-icon-invert-opacity-hover, 1);
}

#metronomeBtn:not([style*="opacity"]),
#keyPlayBtn:not([style*="opacity"]) {
  opacity: var(--app-icon-invert-opacity, 1);
}

#metronomeBtn:hover,
#keyPlayBtn:hover {
  opacity: var(--app-icon-invert-opacity-hover, 1);
}

#keyPlayBtn {
  color: var(--app-text);
}

#keyPlayBtn:hover {
  color: var(--app-primary-hover);
}

/* Outline buttons – themed via --app-btn-outline-*-color and --app-btn-outline-*-hover-color */
.btn-outline-primary { color: var(--app-btn-outline-primary-color, var(--bs-primary)); border-color: var(--app-btn-outline-primary-color, var(--bs-primary)); }
.btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary.active { background-color: var(--app-btn-outline-primary-color, var(--bs-primary)); border-color: var(--app-btn-outline-primary-color, var(--bs-primary)); color: var(--app-btn-outline-primary-hover-color, #fff); }

.btn-outline-secondary { color: var(--app-btn-outline-secondary-color, var(--bs-secondary)); border-color: var(--app-btn-outline-secondary-color, var(--bs-secondary)); }
.btn-outline-secondary:hover, .btn-outline-secondary:active, .btn-outline-secondary.active { background-color: var(--app-btn-outline-secondary-color, var(--bs-secondary)); border-color: var(--app-btn-outline-secondary-color, var(--bs-secondary)); color: var(--app-btn-outline-secondary-hover-color, #fff); }

.btn-outline-success { color: var(--app-btn-outline-success-color, var(--bs-success)); border-color: var(--app-btn-outline-success-color, var(--bs-success)); }
.btn-outline-success:hover, .btn-outline-success:active, .btn-outline-success.active { background-color: var(--app-btn-outline-success-color, var(--bs-success)); border-color: var(--app-btn-outline-success-color, var(--bs-success)); color: var(--app-btn-outline-success-hover-color, #fff); }

.btn-outline-info { color: var(--app-btn-outline-info-color, var(--bs-info)); border-color: var(--app-btn-outline-info-color, var(--bs-info)); }
.btn-outline-info:hover, .btn-outline-info:active, .btn-outline-info.active { background-color: var(--app-btn-outline-info-color, var(--bs-info)); border-color: var(--app-btn-outline-info-color, var(--bs-info)); color: var(--app-btn-outline-info-hover-color, #fff); }

.btn-outline-warning { color: var(--app-btn-outline-warning-color, var(--bs-warning)); border-color: var(--app-btn-outline-warning-color, var(--bs-warning)); }
.btn-outline-warning:hover, .btn-outline-warning:active, .btn-outline-warning.active { background-color: var(--app-btn-outline-warning-color, var(--bs-warning)); border-color: var(--app-btn-outline-warning-color, var(--bs-warning)); color: var(--app-btn-outline-warning-hover-color, #212529); }

.btn-outline-danger { color: var(--app-btn-outline-danger-color, var(--bs-danger)); border-color: var(--app-btn-outline-danger-color, var(--bs-danger)); }
.btn-outline-danger:hover, .btn-outline-danger:active, .btn-outline-danger.active { background-color: var(--app-btn-outline-danger-color, var(--bs-danger)); border-color: var(--app-btn-outline-danger-color, var(--bs-danger)); color: var(--app-btn-outline-danger-hover-color, #fff); }

.btn-outline-light { color: var(--app-btn-outline-light-color, var(--bs-light)); border-color: var(--app-btn-outline-light-color, var(--bs-light)); }
.btn-outline-light:hover, .btn-outline-light:active, .btn-outline-light.active { background-color: var(--app-btn-outline-light-color, var(--bs-light)); border-color: var(--app-btn-outline-light-color, var(--bs-light)); color: var(--app-btn-outline-light-hover-color, #212529); }

.btn-outline-dark { color: var(--app-btn-outline-dark-color, var(--bs-dark)); border-color: var(--app-btn-outline-dark-color, var(--bs-dark)); }
.btn-outline-dark:hover, .btn-outline-dark:active, .btn-outline-dark.active { background-color: var(--app-btn-outline-dark-color, var(--bs-dark)); border-color: var(--app-btn-outline-dark-color, var(--bs-dark)); color: var(--app-btn-outline-dark-hover-color, #fff); }

/* bg-gray-dark-badge – always dark bg, white text */
.badge.bg-gray-dark-badge,
span.badge.bg-gray-dark-badge,
.bg-gray-dark-badge {
  background-color: #6c757d !important;
  background: #6c757d !important;
  color: #fff !important;
}