/**
 * Bootstrap Theme Overrides
 * Applies Salt Design System colors to Bootstrap components
 *
 * This file demonstrates how to use the theme color system with Bootstrap.
 * Add this file to base.html AFTER theme-colors.css and BEFORE project.css
 */

/* ============================================================================
   GLOBAL STYLES
   ============================================================================ */

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

/* Text Selection */
::selection {
  background-color: var(--color-selection-bg);
  color: var(--color-text-base);
}

::-moz-selection {
  background-color: var(--color-selection-bg);
  color: var(--color-text-base);
}

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

.navbar-light {
  background-color: var(--color-bg-surface-subtle) !important;
  border-bottom: 1px solid var(--color-border-subtle);
}

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

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

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

.nav-link:hover,
.nav-link:focus {
  color: var(--color-text-base) !important;
}

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

/* Navbar toggler */
.navbar-toggler {
  border-color: var(--color-border-base);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(115, 115, 128, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

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

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

.btn-primary:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-on-primary);
}

.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  background-color: var(--color-primary-active);
  border-color: var(--color-primary-active);
  color: var(--color-on-primary);
  box-shadow: 0 0 0 0.25rem var(--color-primary-subtle);
}

.btn-primary:disabled,
.btn-primary.disabled {
  background-color: var(--color-neutral-6);
  border-color: var(--color-neutral-6);
  color: var(--color-text-disabled);
}

/* Secondary button */
.btn-secondary {
  background-color: var(--color-neutral-4);
  border-color: var(--color-border-base);
  color: var(--color-text-base);
}

.btn-secondary:hover {
  background-color: var(--color-neutral-5);
  border-color: var(--color-border-strong);
}

/* Outline button */
.btn-outline-primary {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

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

/* Close button */
.btn-close {
  opacity: 0.5;
}

.btn-close:hover {
  opacity: 1;
}

/* Fix close button visibility on dark theme */
[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

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

.alert {
  border-radius: var(--color-radius-lg);
  border-width: 1px;
}

.alert-success {
  background-color: var(--color-success-bg);
  color: var(--color-success-11);
  border-color: var(--color-success-8);
}

.alert-danger {
  background-color: var(--color-error-bg);
  color: var(--color-error-11);
  border-color: var(--color-error-8);
}

.alert-warning {
  background-color: var(--color-warning-bg);
  color: var(--color-warning-11);
  border-color: var(--color-warning-8);
}

.alert-info {
  background-color: var(--color-info-bg);
  color: var(--color-info-11);
  border-color: var(--color-info-8);
}

/* Alert links */
.alert-success a {
  color: var(--color-success-11);
  font-weight: 600;
}

.alert-danger a {
  color: var(--color-error-11);
  font-weight: 600;
}

.alert-warning a {
  color: var(--color-warning-11);
  font-weight: 600;
}

.alert-info a {
  color: var(--color-info-11);
  font-weight: 600;
}

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

.card {
  background-color: var(--color-bg-surface);
  border-color: var(--color-border-subtle);
  border-radius: var(--color-radius-lg);
  color: var(--color-text-base);
}

.card-header {
  background-color: var(--color-bg-surface-subtle);
  border-bottom-color: var(--color-border-subtle);
  color: var(--color-text-base);
}

.card-footer {
  background-color: var(--color-bg-surface-subtle);
  border-top-color: var(--color-border-subtle);
  color: var(--color-text-subtle);
}

.card-title {
  color: var(--color-text-base);
}

.card-subtitle {
  color: var(--color-text-subtle);
}

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

/* Tables inside cards - handle borders and rounded corners */
.card > .table {
  margin-bottom: 0;
}

.card > .table:first-child {
  border-top-left-radius: var(--color-radius-lg);
  border-top-right-radius: var(--color-radius-lg);
}

.card > .table:last-child {
  border-bottom-left-radius: var(--color-radius-lg);
  border-bottom-right-radius: var(--color-radius-lg);
}

.card > .table:first-child > thead:first-child > tr:first-child th:first-child,
.card > .table:first-child > thead:first-child > tr:first-child td:first-child,
.card > .table:first-child > tbody:first-child > tr:first-child th:first-child,
.card > .table:first-child > tbody:first-child > tr:first-child td:first-child {
  border-top-left-radius: calc(var(--color-radius-lg) - 1px);
}

.card > .table:first-child > thead:first-child > tr:first-child th:last-child,
.card > .table:first-child > thead:first-child > tr:first-child td:last-child,
.card > .table:first-child > tbody:first-child > tr:first-child th:last-child,
.card > .table:first-child > tbody:first-child > tr:first-child td:last-child {
  border-top-right-radius: calc(var(--color-radius-lg) - 1px);
}

.card > .table:last-child > tbody:last-child > tr:last-child th:first-child,
.card > .table:last-child > tbody:last-child > tr:last-child td:first-child,
.card > .table:last-child > tfoot:last-child > tr:last-child th:first-child,
.card > .table:last-child > tfoot:last-child > tr:last-child td:first-child {
  border-bottom-left-radius: calc(var(--color-radius-lg) - 1px);
}

.card > .table:last-child > tbody:last-child > tr:last-child th:last-child,
.card > .table:last-child > tbody:last-child > tr:last-child td:last-child,
.card > .table:last-child > tfoot:last-child > tr:last-child th:last-child,
.card > .table:last-child > tfoot:last-child > tr:last-child td:last-child {
  border-bottom-right-radius: calc(var(--color-radius-lg) - 1px);
}

/* Remove double borders between card and table */
.card > .table {
  border: none;
}

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

.table {
  color: var(--color-text-base);
  border-color: var(--color-border-subtle);
}

.table > :not(caption) > * > * {
  background-color: var(--color-bg-surface);
  border-bottom-color: var(--color-border-subtle);
  color: var(--color-text-base);
}

.table thead {
  background-color: var(--color-bg-surface-subtle);
}

.table tbody tr:hover {
  background-color: var(--color-neutral-2) !important;
}

/* Remove bottom border from last row */
.table tbody tr:last-child td,
.table tbody tr:last-child th {
  border-bottom: none;
}

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

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

.form-control:focus,
.form-select:focus {
  background-color: var(--color-bg-surface);
  border-color: var(--color-primary);
  color: var(--color-text-base);
  box-shadow: 0 0 0 0.25rem var(--color-primary-subtle);
}

.form-control:disabled,
.form-select:disabled {
  background-color: var(--color-bg-surface-subtle);
  border-color: var(--color-border-subtle);
  color: var(--color-text-disabled);
}

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

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

.form-text {
  color: var(--color-text-subtle);
}

/* Form validation */
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--color-error);
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  border-color: var(--color-error);
  box-shadow: 0 0 0 0.25rem var(--color-error-3);
}

.invalid-feedback {
  color: var(--color-error);
}

.form-control.is-valid,
.form-select.is-valid {
  border-color: var(--color-success);
}

.form-control.is-valid:focus,
.form-select.is-valid:focus {
  border-color: var(--color-success);
  box-shadow: 0 0 0 0.25rem var(--color-success-3);
}

.valid-feedback {
  color: var(--color-success);
}

/* ============================================================================
   MODALS
   ============================================================================ */

.modal-content {
  background-color: var(--color-bg-surface);
  border-color: var(--color-border-subtle);
  color: var(--color-text-base);
}

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

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

.modal-title {
  color: var(--color-text-base);
}

/* Modal backdrop */
.modal-backdrop {
  background-color: var(--color-neutral-alpha-11);
}

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

.badge {
  border-radius: var(--color-radius-md);
}

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

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

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

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

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

/* ============================================================================
   LINKS
   ============================================================================ */

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

a:active {
  color: var(--color-primary-active);
}

/* ============================================================================
   BORDERS & DIVIDERS
   ============================================================================ */

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

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

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

.border-start {
  border-left-color: var(--color-border-subtle) !important;
}

.border-end {
  border-right-color: var(--color-border-subtle) !important;
}

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

/* ============================================================================
   CUSTOM UTILITIES
   ============================================================================ */

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

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

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

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