/* Bootstrap utilities mapped to AV DS 4 tokens. */

:root {
  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-text);
  --bs-border-color: var(--color-border);
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-link-color: var(--color-accent);
  --bs-link-hover-color: var(--color-accent-hover);
  --bs-focus-ring-color: color-mix(in oklab, var(--color-focus-ring), transparent 70%);
}

.avds-echo-app .container,
.avds-echo-app .container-fluid {
  max-width: var(--container-max, 1280px);
  padding-inline: clamp(var(--space-4), 2vw, var(--space-8));
}

.avds-echo-app :focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.avds-echo-app a {
  color: var(--color-accent);
}

.avds-echo-app a:hover {
  color: var(--color-accent-hover);
}

/* Keep semantic AV DS actions readable despite the generic link color above. */
.avds-echo-app .avds-action--primary,
.avds-echo-app .avds-action--primary:hover,
.avds-echo-app .avds-action--primary:focus-visible {
  color: var(--color-accent-contrast);
}

/* --- Buttons --- */
.btn-primary { background-color: var(--color-accent) !important; border-color: var(--color-accent) !important; color: var(--color-accent-contrast) !important; }
.btn-primary:hover { background-color: var(--color-accent-hover) !important; border-color: var(--color-accent-hover) !important; }
.btn-secondary { background-color: var(--color-surface) !important; border-color: var(--color-border) !important; color: var(--color-text) !important; }
.btn-success, .bg-success { background-color: var(--color-success) !important; color: var(--color-success-contrast) !important; }
.btn-danger, .bg-danger { background-color: var(--color-danger) !important; color: var(--color-danger-contrast) !important; }
.btn-warning, .bg-warning { background-color: var(--color-warning) !important; color: var(--color-warning-contrast) !important; }
.btn-info, .bg-info { background-color: var(--color-info) !important; color: var(--color-info-contrast) !important; }
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info {
  background-color: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-muted) !important;
}
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-success:hover,
.btn-outline-danger:hover,
.btn-outline-warning:hover,
.btn-outline-info:hover {
  background-color: var(--color-accent-subtle) !important;
  border-color: var(--color-accent) !important;
  color: var(--color-accent) !important;
}
.btn:focus-visible {
  box-shadow: var(--shadow-focus) !important;
}

/* --- Text utilities --- */
.text-primary { color: var(--color-accent) !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; }
.text-muted { color: var(--color-text-muted) !important; }
.text-secondary { color: var(--color-text-muted) !important; }

/* --- Alerts --- */
.alert { border-radius: var(--radius-md) !important; }
.alert-success { background-color: var(--color-success-subtle) !important; border-color: var(--color-success-muted) !important; color: var(--color-success-hover) !important; }
.alert-danger { background-color: var(--color-danger-subtle) !important; border-color: var(--color-danger-muted) !important; color: var(--color-danger-hover) !important; }
.alert-warning { background-color: var(--color-warning-subtle) !important; border-color: var(--color-warning-muted) !important; color: var(--color-warning-hover) !important; }
.alert-info { background-color: var(--color-info-subtle) !important; border-color: var(--color-info-muted) !important; color: var(--color-info-hover) !important; }

/* --- Badges --- */
.badge { border-radius: var(--radius-full); font-weight: 700; letter-spacing: 0; }
.badge.bg-secondary { background-color: var(--color-surface-sunken) !important; color: var(--color-text-muted) !important; }
.badge.bg-light { background-color: var(--color-bg-subtle) !important; color: var(--color-text) !important; border: 1px solid var(--color-border-subtle); }

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

/* --- Cards and surfaces --- */
.avds-echo-app .card,
.avds-echo-app .list-group,
.avds-echo-app .accordion-item,
.avds-echo-app .modal-content,
.avds-echo-app .dropdown-menu,
.avds-echo-app .popover {
  background-color: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
  border-radius: var(--radius-md) !important;
}

.avds-echo-app .card-header,
.avds-echo-app .card-footer,
.avds-echo-app .modal-header,
.avds-echo-app .modal-footer,
.avds-echo-app .accordion-button {
  background-color: var(--color-bg-subtle) !important;
  border-color: var(--color-border-subtle) !important;
  color: var(--color-text) !important;
}

.avds-echo-app .list-group-item,
.avds-echo-app .dropdown-item {
  background-color: var(--color-surface) !important;
  border-color: var(--color-border-subtle) !important;
  color: var(--color-text) !important;
}

.avds-echo-app .dropdown-item:hover,
.avds-echo-app .dropdown-item:focus,
.avds-echo-app .list-group-item:hover {
  background-color: var(--color-accent-subtle) !important;
  color: var(--color-accent) !important;
}

/* --- Form controls --- */
.form-control, .form-select, .form-check-input { background-color: var(--color-surface) !important; border-color: var(--color-border) !important; color: var(--color-text) !important; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--color-accent) !important; box-shadow: var(--shadow-focus) !important; }
.form-check-input:checked { background-color: var(--color-accent) !important; border-color: var(--color-accent) !important; }
.form-control::placeholder { color: var(--color-text-faint) !important; opacity: 1; }
.input-group-text { background: var(--color-bg-subtle) !important; border-color: var(--color-border) !important; color: var(--color-text-muted) !important; }

/* --- Tables --- */
.table { color: var(--color-text); --bs-table-bg: var(--color-surface); --bs-table-striped-bg: var(--color-bg-subtle); --bs-table-border-color: var(--color-border-subtle); }
.table-responsive {
  border-radius: var(--radius-md);
  overflow-x: auto;
}
.avds-echo-app table {
  font-variant-numeric: tabular-nums;
}
.avds-echo-app .table > :not(caption) > * > * {
  color: var(--color-text);
  border-bottom-color: var(--color-border-subtle);
}

/* --- Nav tabs --- */
.nav-tabs { border-bottom-color: var(--color-border); }
.nav-tabs .nav-link { color: var(--color-text-muted); border-radius: var(--radius-md) var(--radius-md) 0 0; }
.nav-tabs .nav-link:hover { border-color: var(--color-border-subtle); color: var(--color-accent); }
.nav-tabs .nav-link.active { color: var(--color-accent); background-color: var(--color-surface); border-color: var(--color-border) var(--color-border) var(--color-surface); }

/* --- Pagination --- */
.pagination {
  --bs-pagination-bg: var(--color-surface);
  --bs-pagination-border-color: var(--color-border);
  --bs-pagination-color: var(--color-text-muted);
  --bs-pagination-hover-bg: var(--color-accent-subtle);
  --bs-pagination-hover-border-color: var(--color-accent);
  --bs-pagination-hover-color: var(--color-accent);
  --bs-pagination-active-bg: var(--color-accent);
  --bs-pagination-active-border-color: var(--color-accent);
  --bs-pagination-disabled-bg: var(--color-bg-subtle);
  --bs-pagination-disabled-border-color: var(--color-border-subtle);
  --bs-pagination-disabled-color: var(--color-text-faint);
}