/*
 * Global base styles and Bootstrap 5 variable bridge
 */

/* ========== BOOTSTRAP VARIABLE BRIDGE ========== */

:root {
  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-text-primary);
  --bs-primary: var(--brand-green);
  --bs-primary-rgb: 0, 78, 66;
  --bs-success: var(--color-success);
  --bs-success-rgb: 122, 154, 1;
  --bs-danger: var(--color-danger);
  --bs-danger-rgb: 207, 69, 32;
  --bs-warning: var(--brand-gold);
  --bs-warning-rgb: 255, 205, 0;
  --bs-info: var(--color-info);
  --bs-info-rgb: 123, 175, 212;
  --bs-border-color: var(--color-border);
  --bs-card-bg: var(--color-surface);
  --bs-card-border-color: var(--color-border);
  --bs-link-color: var(--mature-teal);
  --bs-link-hover-color: var(--brand-green);
  --bs-table-bg: var(--color-surface);
  --bs-table-striped-bg: var(--color-surface-raised);
  --bs-table-hover-bg: var(--color-accent-glow);
  --bs-table-border-color: var(--color-border);
  --bs-table-color: var(--color-text-primary);
  --bs-dropdown-bg: var(--color-surface-raised);
  --bs-dropdown-link-color: var(--color-text-primary);
  --bs-dropdown-link-hover-bg: var(--color-accent-glow);
  --bs-dropdown-link-hover-color: var(--color-accent);
  --bs-dropdown-border-color: var(--color-border);
  --bs-navbar-color: var(--color-text-muted);
  --bs-navbar-hover-color: var(--color-text-primary);
  --bs-navbar-active-color: var(--color-accent);
  --bs-navbar-brand-color: var(--color-text-primary);
  --bs-emphasis-color: var(--color-text-primary);
  --bs-secondary-color: var(--color-text-muted);
  --bs-tertiary-bg: var(--color-surface-raised);
  --bs-tertiary-color: var(--color-text-muted);
}

/* ========== TYPOGRAPHY ========== */

body {
  font-family: 'Inter', sans-serif;
  background: var(--color-bg);
  color: var(--color-text-primary);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3, h4,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.stat-value {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  color: var(--color-text-primary);
}

h5, h6 {
  color: var(--color-text-primary);
}

/* ========== LAYOUT ========== */

.footer {
  margin-top: auto;
}

/* ========== CARDS ========== */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-elevated);
  margin-bottom: 1.5rem;
  color: var(--color-text-primary);
}

.card-header {
  background-color: var(--color-card-header-bg);
  color: var(--color-card-header-text);
  font-weight: 500;
  border-bottom: 1px solid var(--color-border);
}

/* Headings inherit header text so global --color-text-primary does not clash with green headers */
.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6,
.card-header .card-title,
.card-header .display-1,
.card-header .display-2,
.card-header .display-3,
.card-header .display-4,
.card-header .display-5,
.card-header .display-6 {
  color: inherit;
}

.card-header .text-body,
.card-header .text-primary,
.card-header .text-success {
  color: inherit !important;
}

.card-header .form-check-label {
  color: inherit;
}

.card-title {
  color: var(--color-text-primary);
  font-weight: 600;
}

.card-body {
  color: var(--color-text-primary);
}

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

/* ========== NAVBAR ========== */

.site-navbar,
.navbar-dark.bg-success,
.navbar.bg-success {
  background: var(--color-navbar-bg) !important;
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-navbar);
}

.site-navbar .navbar-brand,
.navbar-dark .navbar-brand {
  color: var(--color-text-on-dark) !important;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
}

.site-navbar .nav-link,
.navbar-dark .nav-link {
  color: var(--color-navbar-text) !important;
  padding: 0.75rem 1rem;
}

.site-navbar .nav-link:hover,
.navbar-dark .nav-link:hover {
  color: var(--color-navbar-text-hover) !important;
}

.site-navbar .nav-link.active,
.site-navbar .dropdown-item.active,
.navbar-dark .nav-link.active,
.navbar .nav-link.active,
.navbar .dropdown-item.active,
.dropdown-menu .dropdown-item.active {
  background-color: var(--color-navbar-active-bg) !important;
  color: var(--color-navbar-active-text) !important;
  font-weight: 600;
  border-bottom: none;
}

[data-theme="dark"] .site-navbar .nav-link.active,
[data-theme="dark"] .navbar .nav-link.active,
[data-theme="dark"] .navbar .dropdown-item.active {
  background-color: transparent !important;
  color: var(--color-navbar-active-text) !important;
  border-bottom: 2px solid var(--brand-gold);
}

[data-theme="dark"] .navbar .dropdown-item.active {
  border-bottom: none;
  border-left: 2px solid var(--brand-gold);
}

.site-navbar .dropdown-item:hover,
.navbar .dropdown-item:hover,
.dropdown-menu .dropdown-item:hover {
  background-color: var(--color-accent-glow);
  color: var(--brand-green);
}

[data-theme="dark"] .navbar .dropdown-item:hover {
  color: var(--brand-gold);
}

.site-navbar .dropdown-menu,
.navbar .dropdown-menu,
.dropdown-menu {
  background: var(--color-surface);
  border-color: var(--color-border);
  box-shadow: var(--shadow-elevated);
}

.site-navbar .dropdown-item,
.navbar .dropdown-item,
.dropdown-menu .dropdown-item {
  color: var(--brand-green);
}

[data-theme="dark"] .navbar .dropdown-item {
  color: var(--color-text-primary);
}

.site-navbar .dropdown-header,
.navbar .dropdown-header,
.dropdown-menu .dropdown-header {
  color: var(--color-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}

.site-navbar .dropdown-divider,
.navbar .dropdown-divider,
.dropdown-menu .dropdown-divider {
  border-color: var(--color-border);
}

.theme-toggle-btn {
  color: var(--color-navbar-text) !important;
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 0.35rem 0.6rem;
}

.theme-toggle-btn:hover {
  color: var(--color-navbar-text-hover) !important;
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
}

[data-theme="dark"] .theme-toggle-btn {
  border-color: var(--color-border);
}

/* ========== FOOTER ========== */

.site-footer,
.footer.bg-success,
.footer {
  background: var(--color-footer-bg) !important;
  border-top: 1px solid var(--color-border);
  color: var(--color-footer-link) !important;
}

.site-footer h5,
.footer h5 {
  color: var(--color-text-on-dark) !important;
  font-family: 'Barlow Condensed', sans-serif;
}

.site-footer a,
.footer a {
  color: var(--color-footer-link) !important;
  text-decoration: none !important;
}

.site-footer a:hover,
.footer a:hover {
  color: var(--color-text-on-dark) !important;
  text-decoration: underline !important;
}

[data-theme="dark"] .site-footer a:hover,
[data-theme="dark"] .footer a:hover {
  color: var(--brand-gold) !important;
}

/* ========== TABLES ========== */

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

.table thead th {
  position: sticky;
  top: 0;
  background: var(--color-table-header-bg);
  color: var(--color-table-header-text);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 2px solid var(--color-accent-highlight);
  font-weight: 500;
}

[data-theme="dark"] .table thead th {
  background: var(--color-surface-raised);
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--color-table-stripe-bg);
  color: var(--color-text-primary);
}

.table-hover > tbody > tr:hover > * {
  background-color: var(--color-table-hover-bg);
  color: var(--color-text-primary);
}

/* ========== BUTTONS ========== */

.btn-primary {
  background: var(--brand-green);
  border-color: var(--brand-green);
  color: #ffffff;
  font-weight: 600;
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--color-accent-dim);
  border-color: var(--color-accent-dim);
  color: #ffffff;
}

.btn-success {
  background: var(--bold-green);
  border-color: var(--bold-green);
  color: #ffffff;
  font-weight: 600;
}

.btn-success:hover,
.btn-success:focus {
  background: #698501;
  border-color: #698501;
  color: #ffffff;
}

.btn-outline-primary {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}

.btn-outline-success {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn-outline-success:hover,
.btn-outline-success:focus {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}

.btn-info {
  background-color: var(--color-info);
  border-color: var(--color-info);
  color: var(--color-bg);
}

.btn-warning {
  background-color: var(--color-warning);
  border-color: var(--color-warning);
  color: var(--color-bg);
}

.btn-light {
  background-color: var(--color-surface-raised);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

.btn-light:hover {
  background-color: var(--color-accent-glow);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn-outline-secondary {
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

.btn-outline-secondary:hover {
  background-color: var(--color-surface-raised);
  color: var(--color-text-primary);
}

.accordion-item {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

.accordion-button {
  background-color: var(--color-surface-raised);
  color: var(--color-text-primary);
}

.accordion-button:not(.collapsed) {
  background-color: var(--color-surface-raised);
  color: var(--color-accent);
  box-shadow: none;
}

.accordion-button:focus {
  box-shadow: 0 0 0 3px var(--color-accent-glow);
  border-color: var(--color-accent);
}

.accordion-body {
  background-color: var(--color-surface);
  color: var(--color-text-primary);
}

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

.offcanvas {
  background-color: var(--color-surface);
  color: var(--color-text-primary);
}

/* ========== BADGES ========== */

.badge.bg-success {
  background: var(--bold-green) !important;
  color: #ffffff;
}

.badge.bg-danger {
  background: var(--color-danger) !important;
}

.badge.bg-primary {
  background: var(--color-accent-dim) !important;
}

.badge.bg-warning {
  background: var(--color-warning) !important;
  color: var(--color-bg);
}

.badge.bg-info {
  background: var(--color-info) !important;
  color: var(--color-bg);
}

.badge.bg-secondary {
  background: var(--color-surface-raised) !important;
  color: var(--color-text-muted);
}

/* ========== FORMS ========== */

.form-label {
  color: var(--color-text-muted);
  font-weight: 500;
}

.form-control {
  background-color: var(--color-form-bg);
  border-color: var(--color-form-border);
  color: var(--color-form-text);
}

.form-select {
  background-color: var(--color-form-bg);
  background-image: var(--form-select-indicator);
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  border-color: var(--color-form-border);
  color: var(--color-form-text);
}

.form-control:focus {
  background-color: var(--color-form-bg);
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-glow);
  color: var(--color-form-text);
}

.form-select:focus {
  background-color: var(--color-form-bg);
  background-image: var(--form-select-indicator);
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-glow);
  color: var(--color-form-text);
}

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

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

/* ========== ALERTS ========== */

.alert {
  border-radius: var(--radius-card);
}

.alert-info {
  background-color: var(--color-state-info-bg);
  border-color: var(--mature-blue);
  color: var(--color-state-info-text);
}

.alert-success {
  background-color: var(--color-state-success-bg);
  border-color: var(--bold-green);
  color: var(--color-state-success-text);
}

.alert-warning {
  background-color: var(--color-state-warning-bg);
  border-color: var(--brand-gold);
  color: var(--color-state-warning-text);
}

.alert-danger {
  background-color: var(--color-state-danger-bg);
  border-color: var(--bold-orange);
  color: var(--color-state-danger-text);
}

[data-theme="dark"] .alert .btn-close {
  filter: invert(1) grayscale(1);
}

/* ========== UTILITY OVERRIDES ========== */

.bg-success {
  background-color: var(--brand-green) !important;
  color: #ffffff !important;
}

.bg-primary {
  background-color: var(--brand-green) !important;
  color: #ffffff !important;
}

.bg-light {
  background-color: var(--color-surface) !important;
  color: var(--color-text-primary) !important;
}

.bg-dark {
  background-color: var(--color-bg) !important;
}

.text-success {
  color: var(--brand-green) !important;
}

.text-primary {
  color: var(--brand-green) !important;
}

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

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

.text-white {
  color: #ffffff !important;
}

.border-success {
  border-color: var(--color-accent-dim) !important;
}

.border-primary {
  border-color: var(--color-accent) !important;
}

.list-group-item {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

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

/* ========== PROFILE ========== */

.profile-header {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-elevated);
}

.profile-header h1,
.profile-header p {
  color: var(--color-text-primary);
}

.profile-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 4px solid var(--color-accent);
  background-color: var(--color-surface-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: var(--color-accent);
  box-shadow: var(--shadow-elevated);
}

.profile-sidebar .nav-link {
  color: var(--color-text-muted);
  border-radius: var(--radius-badge);
  margin-bottom: 0.25rem;
  transition: all 0.2s ease;
}

.profile-sidebar .nav-link:hover {
  background-color: var(--color-accent-glow);
  color: var(--color-accent);
}

.profile-sidebar .nav-link.active {
  background-color: var(--color-accent-dim);
  color: var(--color-text-primary);
}

.profile-sidebar .nav-link-danger {
  color: var(--color-danger);
}

.connected-account {
  display: flex;
  align-items: center;
  border-radius: var(--radius-badge);
  background-color: var(--color-surface-raised);
}

.session-item {
  border-radius: var(--radius-badge);
  background-color: var(--color-surface-raised);
  border-left: 4px solid var(--color-accent);
}

/* Toggle switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-border);
  transition: 0.4s;
  border-radius: 24px;
}

.toggle-slider::before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: var(--color-text-primary);
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .toggle-slider {
  background-color: var(--color-accent);
}

input:checked + .toggle-slider::before {
  transform: translateX(26px);
}

/* ========== TINYMCE TABLE VARIANTS (site-wide) ========== */

.tinymce-header-primary {
  background-color: var(--color-surface-raised) !important;
  color: var(--color-text-primary) !important;
  border-bottom: 2px solid var(--color-accent) !important;
}

.tinymce-header-secondary {
  background-color: var(--color-accent-dim) !important;
  color: var(--color-text-primary) !important;
  border-bottom: 2px solid var(--color-accent) !important;
}

.tinymce-header-success {
  background-color: var(--color-accent-dim) !important;
  color: var(--color-text-primary) !important;
  border-bottom: 2px solid var(--color-accent) !important;
}

.tinymce-header-warning {
  background-color: var(--color-warning) !important;
  color: var(--color-bg) !important;
}

.tinymce-header-info {
  background-color: var(--color-info) !important;
  color: var(--color-bg) !important;
}

.tinymce-table-striped tbody tr:nth-child(odd) {
  background-color: var(--color-surface-raised) !important;
}

.tinymce-table-striped tbody tr:nth-child(even) {
  background-color: var(--color-surface) !important;
}

.tinymce-table-bordered {
  border: 2px solid var(--color-border) !important;
}

.tinymce-table-bordered th,
.tinymce-table-bordered td {
  border: 1px solid var(--color-border) !important;
}

.tinymce-table-hover tbody tr:hover {
  background-color: var(--color-accent-glow) !important;
}

/* ========== RESPONSIVE TYPOGRAPHY ========== */

@media (max-width: 768px) {
  .card {
    margin-bottom: 1rem;
  }

  .stat-card .stat-value {
    font-size: 2rem;
  }
}