/*
 * Bootstrap, themed from theme.css
 * ================================
 *
 * Maps Peacock's tokens onto Bootstrap 5.3's CSS variables, so markup that
 * uses Bootstrap directly (crispy forms, modals, alerts, the nav's collapse)
 * matches Peacock's own components. Only colours, type and shape live here;
 * no layout. Change the look in theme.css, not here.
 */

[data-bs-theme="dark"] {
  --bs-body-bg: var(--pc-color-bg);
  --bs-body-color: var(--pc-color-text);
  --bs-body-font-family: var(--pc-font-family);
  --bs-body-font-size: var(--pc-font-size-body);
  --bs-body-line-height: var(--pc-line-height);
  --bs-emphasis-color: var(--pc-color-text);
  --bs-secondary-color: var(--pc-color-text-muted);
  --bs-tertiary-color: var(--pc-color-text-subtle);
  --bs-secondary-bg: var(--pc-color-surface);
  --bs-tertiary-bg: var(--pc-color-surface-raised);
  --bs-heading-color: var(--pc-color-text);
  --bs-link-color: var(--pc-color-accent);
  --bs-link-hover-color: var(--pc-color-accent-hover);
  --bs-border-color: var(--pc-color-border-strong);
  --bs-border-color-translucent: var(--pc-color-border);
  --bs-border-radius: var(--pc-radius-small);
  --bs-border-radius-sm: var(--pc-radius-small);
  --bs-border-radius-lg: var(--pc-radius);
  --bs-focus-ring-color: var(--pc-color-accent-line);
  --bs-form-valid-color: var(--pc-color-success);
  --bs-form-valid-border-color: var(--pc-color-success-line);
  --bs-form-invalid-color: var(--pc-color-danger);
  --bs-form-invalid-border-color: var(--pc-color-danger-line);
  --bs-success-text-emphasis: var(--pc-color-success);
  --bs-success-bg-subtle: var(--pc-color-success-bg);
  --bs-success-border-subtle: var(--pc-color-success-line);
  --bs-warning-text-emphasis: var(--pc-color-warning);
  --bs-warning-bg-subtle: var(--pc-color-warning-bg);
  --bs-warning-border-subtle: var(--pc-color-warning-line);
  --bs-danger-text-emphasis: var(--pc-color-danger);
  --bs-danger-bg-subtle: var(--pc-color-danger-bg);
  --bs-danger-border-subtle: var(--pc-color-danger-line);
  --bs-info-text-emphasis: var(--pc-color-info);
  --bs-info-bg-subtle: var(--pc-color-info-bg);
  --bs-info-border-subtle: var(--pc-color-info-line);
  --bs-primary-text-emphasis: var(--pc-color-accent);
  --bs-primary-bg-subtle: var(--pc-color-accent-soft);
  --bs-primary-border-subtle: var(--pc-color-accent-line);
}

/* Headings: Bootstrap's sizes are much larger than Peacock's scale */
h1, .h1, h2, .h2 { font-size: var(--pc-font-size-display); font-weight: var(--pc-font-weight-bold); }
h3, .h3, h4, .h4 { font-size: var(--pc-font-size-heading); font-weight: var(--pc-font-weight-bold); }
h5, .h5, h6, .h6 { font-size: var(--pc-font-size-body); font-weight: var(--pc-font-weight-bold); }

/* Buttons: primary is the accent; everything else is an outline */
.btn {
  --bs-btn-font-size: var(--pc-font-size-small);
  --bs-btn-font-weight: var(--pc-font-weight-bold);
  --bs-btn-border-radius: var(--pc-radius-small);
  --bs-btn-padding-y: 0.45rem;
  --bs-btn-padding-x: 0.9rem;
  --bs-btn-focus-box-shadow: var(--pc-focus-ring);
}
.btn-primary {
  --bs-btn-color: var(--pc-color-on-accent);
  --bs-btn-bg: var(--pc-color-accent);
  --bs-btn-border-color: var(--pc-color-accent);
  --bs-btn-hover-color: var(--pc-color-on-accent);
  --bs-btn-hover-bg: var(--pc-color-accent-hover);
  --bs-btn-hover-border-color: var(--pc-color-accent-hover);
  --bs-btn-active-color: var(--pc-color-on-accent);
  --bs-btn-active-bg: var(--pc-color-accent-hover);
  --bs-btn-active-border-color: var(--pc-color-accent-hover);
  --bs-btn-disabled-color: var(--pc-color-on-accent);
  --bs-btn-disabled-bg: var(--pc-color-accent);
  --bs-btn-disabled-border-color: var(--pc-color-accent);
}

/* Fields */
.form-control,
.form-select {
  font-size: var(--pc-font-size-small);
  background-color: var(--pc-color-surface-sunken);
  border-color: var(--pc-color-border-strong);
  border-radius: var(--pc-radius-small);
  min-height: var(--pc-control-height);
}
.form-control::placeholder { color: var(--pc-color-text-subtle); }
.form-control:focus,
.form-select:focus {
  background-color: var(--pc-color-surface-sunken);
  border-color: var(--pc-color-accent-line);
  box-shadow: var(--pc-focus-ring);
}
[data-bs-theme="dark"] .form-select {
  --bs-form-select-bg-img: var(--pc-icon-select-arrow);
}
.form-label {
  font-size: var(--pc-font-size-label);
  font-weight: var(--pc-font-weight-bold);
  color: var(--pc-color-text-muted);
}
.form-text { font-size: var(--pc-font-size-label); color: var(--pc-color-text-subtle); }
.form-check-input {
  background-color: var(--pc-color-surface-sunken);
  border-color: var(--pc-color-border-strong);
}
.form-check-input:checked {
  background-color: var(--pc-color-accent);
  border-color: var(--pc-color-accent);
}
[data-bs-theme="dark"] .form-check-input:checked[type="checkbox"] {
  --bs-form-check-bg-image: var(--pc-icon-check);
}
[data-bs-theme="dark"] .form-check-input:checked[type="radio"] {
  --bs-form-check-bg-image: var(--pc-icon-radio);
}
.form-check-input:focus { border-color: var(--pc-color-accent-line); box-shadow: var(--pc-focus-ring); }
.invalid-feedback { font-size: var(--pc-font-size-label); }

/* Alerts: a quiet panel with a coloured left edge, like .pc-note */
.alert {
  --bs-alert-bg: var(--pc-color-surface);
  --bs-alert-color: var(--pc-color-text);
  --bs-alert-border-color: var(--pc-color-border);
  --bs-alert-border-radius: var(--pc-radius-small);
  --bs-alert-padding-y: var(--pc-space-3);
  --bs-alert-padding-x: var(--pc-space-4);
  font-size: var(--pc-font-size-small);
  border-left: 3px solid var(--pc-color-info);
}
.alert-success { border-left-color: var(--pc-color-success); }
.alert-warning { border-left-color: var(--pc-color-warning); }
.alert-danger,
.alert-error { border-left-color: var(--pc-color-danger); }
.alert-success, .alert-warning, .alert-danger, .alert-error, .alert-info {
  --bs-alert-bg: var(--pc-color-surface);
  --bs-alert-color: var(--pc-color-text);
  --bs-alert-border-color: var(--pc-color-border);
  --bs-alert-link-color: var(--pc-color-accent);
}

/* Dialogs sit on the raised surface */
.modal {
  --bs-modal-bg: var(--pc-color-surface-raised);
  --bs-modal-border-color: var(--pc-color-border-strong);
  --bs-modal-header-border-color: var(--pc-color-border);
  --bs-modal-footer-border-color: var(--pc-color-border);
  --bs-modal-border-radius: var(--pc-radius);
}
.modal-title { font-size: var(--pc-font-size-heading); font-weight: var(--pc-font-weight-bold); }


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