/**
 * Bootstrap Design Token Overrides
 * Maps Bootstrap utility classes to Rippli design system tokens
 */

/* Override Bootstrap's primary color system */
:root {
  --bs-primary: var(--color-interactive-primary);
  --bs-secondary: var(--color-text-secondary);
  --bs-success: var(--color-success);
  --bs-danger: var(--color-danger);
  --bs-warning: var(--color-warning);
  --bs-info: var(--color-info);
  --bs-light: var(--color-surface-secondary);
  --bs-dark: var(--color-text-primary);
  
  /* RGB tokens for Japandi theme (default light) - Sage Green */
  /* hsl(135 18% 45%) = rgb(95, 110, 95) */
  --bs-primary-rgb: 95, 110, 95;
  --bs-success-rgb: 61, 138, 94;  /* hsl(155 35% 40%) */
  --bs-danger-rgb: 224, 56, 56;   /* hsl(0 75% 50%) */
  --bs-warning-rgb: 242, 201, 76; /* hsl(43 85% 50%) */
  --bs-info-rgb: 115, 115, 115;   /* hsl(26 5% 45%) - neutral-500 */
  
  /* Background colors */
  --bs-body-bg: var(--color-bg-primary);
  --bs-body-color: var(--color-text-primary);
  
  /* Link colors */
  --bs-link-color: var(--color-interactive-primary);
  --bs-link-hover-color: var(--color-interactive-hover);
  
  /* Border colors */
  --bs-border-color: var(--color-border-primary);
  
  /* Form inputs */
  --bs-input-bg: var(--color-surface-primary);
  --bs-input-border-color: var(--color-border-primary);
  --bs-input-focus-border-color: var(--color-interactive-primary);
  --bs-input-color: var(--color-text-primary);
  
  /* Button state overrides */
  --bs-btn-active-bg: var(--color-interactive-hover);
  --bs-btn-active-border-color: var(--color-interactive-hover);
  --bs-btn-hover-bg: var(--color-interactive-hover);
  --bs-btn-hover-border-color: var(--color-interactive-hover);
  
  /* Subtle background and border utilities - Japandi Light */
  --bs-primary-bg-subtle: color-mix(in srgb, var(--color-interactive-primary) 10%, var(--color-surface-primary));
  --bs-primary-border-subtle: color-mix(in srgb, var(--color-interactive-primary) 30%, transparent);
  --bs-primary-text-emphasis: var(--color-interactive-primary);
  
  --bs-success-bg-subtle: var(--color-success-bg);
  --bs-success-border-subtle: color-mix(in srgb, var(--color-success) 30%, transparent);
  --bs-success-text-emphasis: var(--color-success);
  
  --bs-danger-bg-subtle: var(--color-danger-bg);
  --bs-danger-border-subtle: color-mix(in srgb, var(--color-danger) 30%, transparent);
  --bs-danger-text-emphasis: var(--color-danger);
  
  --bs-warning-bg-subtle: var(--color-warning-bg);
  --bs-warning-border-subtle: color-mix(in srgb, var(--color-warning) 30%, transparent);
  --bs-warning-text-emphasis: var(--color-warning);
  
  --bs-info-bg-subtle: var(--color-info-bg);
  --bs-info-border-subtle: color-mix(in srgb, var(--color-info) 30%, transparent);
  --bs-info-text-emphasis: var(--color-info);
}

/* Dark mode overrides for Japandi */
[data-theme="dark"] {
  /* Japandi dark mode - lighter variants for better visibility */
  --bs-primary-rgb: 110, 130, 110;  /* Lighter sage */
  --bs-success-rgb: 80, 160, 115;   /* Lighter green */
  --bs-danger-rgb: 240, 90, 90;     /* Lighter red */
  --bs-warning-rgb: 250, 210, 100;  /* Lighter yellow */
  --bs-info-rgb: 150, 150, 150;     /* Lighter neutral */
  
  /* Subtle background and border utilities - Japandi Dark */
  --bs-primary-bg-subtle: color-mix(in srgb, var(--color-interactive-primary) 15%, var(--color-surface-primary));
  --bs-primary-border-subtle: color-mix(in srgb, var(--color-interactive-primary) 35%, transparent);
  
  --bs-success-bg-subtle: color-mix(in srgb, var(--color-success) 15%, var(--color-surface-primary));
  --bs-success-border-subtle: color-mix(in srgb, var(--color-success) 35%, transparent);
  
  --bs-danger-bg-subtle: color-mix(in srgb, var(--color-danger) 15%, var(--color-surface-primary));
  --bs-danger-border-subtle: color-mix(in srgb, var(--color-danger) 35%, transparent);
  
  --bs-warning-bg-subtle: color-mix(in srgb, var(--color-warning) 15%, var(--color-surface-primary));
  --bs-warning-border-subtle: color-mix(in srgb, var(--color-warning) 35%, transparent);
  
  --bs-info-bg-subtle: color-mix(in srgb, var(--color-info) 15%, var(--color-surface-primary));
  --bs-info-border-subtle: color-mix(in srgb, var(--color-info) 35%, transparent);
}

/* Button overrides - All states */
.btn-primary {
  background-color: var(--color-interactive-primary);
  border-color: var(--color-interactive-primary);
  color: var(--color-text-inverse);
}

.btn-primary:hover,
.btn-primary.hover {
  background-color: var(--color-interactive-hover);
  border-color: var(--color-interactive-hover);
  color: var(--color-text-inverse);
}

.btn-primary:focus,
.btn-primary.focus {
  background-color: var(--color-interactive-hover);
  border-color: var(--color-interactive-hover);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-interactive-primary) 50%, transparent);
}

.btn-primary:active,
.btn-primary.active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--color-interactive-hover);
  border-color: var(--color-interactive-hover);
}

.btn-primary:disabled,
.btn-primary.disabled {
  background-color: color-mix(in srgb, var(--color-interactive-primary) 50%, transparent);
  border-color: color-mix(in srgb, var(--color-interactive-primary) 50%, transparent);
  opacity: 0.65;
}

/* Button outline variants */
.btn-outline-primary {
  color: var(--color-interactive-primary);
  border-color: var(--color-interactive-primary);
}

.btn-outline-primary:hover {
  background-color: var(--color-interactive-primary);
  border-color: var(--color-interactive-primary);
  color: var(--color-text-inverse);
}

.btn-outline-primary:focus {
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-interactive-primary) 50%, transparent);
}

.btn-outline-primary:active,
.btn-outline-primary.active {
  background-color: var(--color-interactive-primary);
  border-color: var(--color-interactive-primary);
}

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

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

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

.btn-outline-danger:hover {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
}

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

.btn-outline-info:hover {
  background-color: var(--color-info);
  border-color: var(--color-info);
  color: var(--color-text-inverse);
}

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

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

/* Secondary and other button variants */
.btn-secondary {
  background-color: var(--color-surface-secondary);
  border-color: var(--color-border-primary);
  color: var(--color-text-primary);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
  background-color: color-mix(in srgb, var(--color-surface-secondary) 90%, var(--color-text-primary));
  border-color: var(--color-border-primary);
  color: var(--color-text-primary);
}

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

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
  background-color: color-mix(in srgb, var(--color-success) 85%, black);
  border-color: color-mix(in srgb, var(--color-success) 85%, black);
}

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

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
  background-color: color-mix(in srgb, var(--color-danger) 85%, black);
  border-color: color-mix(in srgb, var(--color-danger) 85%, black);
}

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

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
  background-color: color-mix(in srgb, var(--color-warning) 85%, black);
  border-color: color-mix(in srgb, var(--color-warning) 85%, black);
}

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

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
  background-color: color-mix(in srgb, var(--color-info) 85%, black);
  border-color: color-mix(in srgb, var(--color-info) 85%, black);
  color: var(--color-text-inverse);
}

/* Button links */
.btn-link {
  color: var(--color-interactive-primary);
}

.btn-link:hover {
  color: var(--color-interactive-hover);
}

/* Toggle button states */
.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary {
  background-color: var(--color-interactive-hover);
  border-color: var(--color-interactive-hover);
  color: var(--color-text-inverse);
}

.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary {
  background-color: var(--color-interactive-primary);
  border-color: var(--color-interactive-primary);
  color: var(--color-text-inverse);
}

.btn-check:focus + .btn,
.btn-check:focus + .btn-primary,
.btn-check:focus + .btn-outline-primary {
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-interactive-primary) 50%, transparent);
}

.btn-check:checked + .btn-success,
.btn-check:active + .btn-success {
  background-color: color-mix(in srgb, var(--color-success) 85%, black);
  border-color: color-mix(in srgb, var(--color-success) 85%, black);
}

.btn-check:checked + .btn-danger,
.btn-check:active + .btn-danger {
  background-color: color-mix(in srgb, var(--color-danger) 85%, black);
  border-color: color-mix(in srgb, var(--color-danger) 85%, black);
}

.btn-check:checked + .btn-info,
.btn-check:active + .btn-info {
  background-color: color-mix(in srgb, var(--color-info) 85%, black);
  border-color: color-mix(in srgb, var(--color-info) 85%, black);
}

.btn-check:checked + .btn-warning,
.btn-check:active + .btn-warning {
  background-color: color-mix(in srgb, var(--color-warning) 85%, black);
  border-color: color-mix(in srgb, var(--color-warning) 85%, black);
}

/* Button group */
.btn-group .btn:focus,
.btn-group-vertical .btn:focus {
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-interactive-primary) 50%, transparent);
}

/* Badge overrides - Modern .bg-* classes */
.badge.bg-primary {
  background-color: var(--color-interactive-primary) !important;
  color: var(--color-text-inverse) !important;
}

.badge.bg-success {
  background-color: var(--color-success) !important;
  color: var(--color-text-inverse) !important;
}

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

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

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

/* Badge overrides - Legacy .badge-* classes for backward compatibility */
.badge-primary,
.badge.badge-primary {
  background-color: var(--color-interactive-primary) !important;
  color: var(--color-text-inverse) !important;
}

.badge-success,
.badge.badge-success {
  background-color: var(--color-success) !important;
  color: var(--color-text-inverse) !important;
}

.badge-danger,
.badge.badge-danger {
  background-color: var(--color-danger) !important;
  color: var(--color-text-inverse) !important;
}

.badge-warning,
.badge.badge-warning {
  background-color: var(--color-warning) !important;
  color: var(--color-text-inverse) !important;
}

.badge-info,
.badge.badge-info {
  background-color: var(--color-info) !important;
  color: var(--color-text-inverse) !important;
}

.badge-secondary,
.badge.badge-secondary {
  background-color: var(--color-surface-secondary) !important;
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-border-primary);
}

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

.badge-light,
.badge.badge-light {
  background-color: var(--color-bg-muted) !important;
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-border-primary);
}

/* Alert overrides */
.alert-primary {
  background-color: color-mix(in srgb, var(--color-interactive-primary) 10%, var(--color-surface-primary));
  border-color: var(--color-interactive-primary);
  color: var(--color-text-primary);
}

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

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

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

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

/* Form control overrides */
.form-control {
  background-color: var(--color-surface-primary);
  border-color: var(--color-border-primary);
  color: var(--color-text-primary);
}

.form-control:focus {
  border-color: var(--color-interactive-primary);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-interactive-primary) 25%, transparent);
}

/* Pagination overrides */
.pagination .page-link {
  background-color: var(--color-surface-primary);
  border-color: var(--color-border-primary);
  color: var(--color-interactive-primary);
}

.pagination .page-link:hover {
  background-color: var(--color-surface-secondary);
  border-color: var(--color-border-primary);
  color: var(--color-interactive-hover);
}

.pagination .page-item.active .page-link {
  background-color: var(--color-interactive-primary);
  border-color: var(--color-interactive-primary);
  color: var(--color-text-inverse);
}

/* Progress bar overrides */
.progress {
  background-color: var(--color-surface-secondary);
}

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

.progress-bar.bg-success {
  background-color: var(--color-success) !important;
}

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

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

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

/* Card overrides */
.card {
  background-color: var(--color-surface-primary);
  border-color: var(--color-border-primary);
}

.card-header {
  background-color: var(--color-surface-secondary);
  border-bottom-color: var(--color-border-primary);
}

/* Modal overrides */
.modal-content {
  background-color: var(--color-surface-primary);
  border-color: var(--color-border-primary);
}

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

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

/* Dropdown overrides - All states */
.dropdown-menu {
  background-color: var(--color-surface-primary);
  border-color: var(--color-border-primary);
}

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

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

.dropdown-item:active,
.dropdown-item.active {
  background-color: var(--color-interactive-primary);
  color: var(--color-text-inverse);
}

.dropdown-item:disabled,
.dropdown-item.disabled {
  color: var(--color-text-tertiary);
}

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

/* Table overrides */
.table {
  color: var(--color-text-primary);
  border-color: var(--color-border-primary);
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: var(--color-surface-secondary);
}

/* Text color utilities */
.text-primary {
  color: var(--color-interactive-primary) !important;
}

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

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

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

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

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

/* Background color utilities */
.bg-primary {
  background-color: var(--color-interactive-primary) !important;
}

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

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

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

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

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

/* Subtle background utilities */
.bg-primary-subtle {
  background-color: var(--bs-primary-bg-subtle) !important;
}

.bg-success-subtle {
  background-color: var(--bs-success-bg-subtle) !important;
}

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

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

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

/* Border utilities */
.border-primary {
  border-color: var(--bs-primary-border-subtle) !important;
}

.border-success {
  border-color: var(--bs-success-border-subtle) !important;
}

.border-danger {
  border-color: var(--bs-danger-border-subtle) !important;
}

.border-warning {
  border-color: var(--bs-warning-border-subtle) !important;
}

.border-info {
  border-color: var(--bs-info-border-subtle) !important;
}

/* Text background utilities */
.text-bg-primary {
  background-color: var(--color-interactive-primary) !important;
  color: var(--color-text-inverse) !important;
}

.text-bg-success {
  background-color: var(--color-success) !important;
  color: var(--color-text-inverse) !important;
}

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

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

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

/* Table variant utilities */
.table-primary {
  --bs-table-bg: var(--bs-primary-bg-subtle);
  --bs-table-border-color: var(--bs-primary-border-subtle);
}

.table-success {
  --bs-table-bg: var(--bs-success-bg-subtle);
  --bs-table-border-color: var(--bs-success-border-subtle);
}

.table-danger {
  --bs-table-bg: var(--bs-danger-bg-subtle);
  --bs-table-border-color: var(--bs-danger-border-subtle);
}

.table-warning {
  --bs-table-bg: var(--bs-warning-bg-subtle);
  --bs-table-border-color: var(--bs-warning-border-subtle);
}

.table-info {
  --bs-table-bg: var(--bs-info-bg-subtle);
  --bs-table-border-color: var(--bs-info-border-subtle);
}

/* Link utilities */
a {
  color: var(--color-interactive-primary);
}

a:hover {
  color: var(--color-interactive-hover);
}

a:focus {
  outline-color: var(--color-interactive-primary);
}

.link-primary {
  color: var(--color-interactive-primary) !important;
}

.link-primary:hover,
.link-primary:focus {
  color: var(--color-interactive-hover) !important;
}

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

.link-success {
  color: var(--color-success) !important;
}

.link-danger {
  color: var(--color-danger) !important;
}

.link-info {
  color: var(--color-info) !important;
}

/* Nav components */
.nav-link {
  color: var(--color-text-primary);
}

.nav-link:hover,
.nav-link:focus {
  color: var(--color-interactive-primary);
}

.nav-link.active {
  color: var(--color-interactive-primary);
}

.nav-link:disabled,
.nav-link.disabled {
  color: var(--color-text-tertiary);
}

.nav-tabs .nav-link {
  border-color: transparent transparent var(--color-border-primary);
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  border-color: var(--color-border-primary) var(--color-border-primary) var(--color-border-primary);
}

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

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

.nav-pills .nav-link:hover {
  background-color: var(--color-surface-secondary);
}

.nav-pills .nav-link.active {
  background-color: var(--color-interactive-primary);
  color: var(--color-text-inverse);
}

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

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

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

.list-group-item-primary {
  background-color: color-mix(in srgb, var(--color-interactive-primary) 10%, var(--color-surface-primary));
  color: var(--color-text-primary);
}

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

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

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

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