/* ==========================================================================
   MAXPort theme: maps design tokens (tokens.css) onto Bootstrap 5.3 CSS variables,
   so every Bootstrap component and utility follows the MAXPort style.
   Load order: bootstrap.css → tokens.css → theme.css → components.css.
   Do not put hard-coded colors here; reference --mp-* tokens.
   ========================================================================== */

:root,
[data-bs-theme="dark"] {
  --bs-font-sans-serif: var(--mp-font-sans);
  --bs-font-monospace: var(--mp-font-mono);
  --bs-body-font-size: var(--mp-font-size-base);
  --bs-body-line-height: var(--mp-line-height-base);

  --bs-body-bg: var(--mp-color-bg);
  --bs-body-color: var(--mp-color-text);
  --bs-secondary-color: var(--mp-color-text-muted);
  --bs-tertiary-bg: var(--mp-color-surface-muted);
  --bs-border-color: var(--mp-color-border);
  --bs-link-color: var(--mp-color-link);
  --bs-link-hover-color: var(--mp-color-link-hover);
  --bs-link-color-rgb: initial;
  --bs-link-hover-color-rgb: initial;

  --bs-primary: var(--mp-color-primary);
  --bs-success: var(--mp-color-success);
  --bs-warning: var(--mp-color-warning);
  --bs-danger: var(--mp-color-danger);
  --bs-info: var(--mp-color-info);

  --bs-border-radius: var(--mp-radius);
  --bs-border-radius-sm: var(--mp-radius-sm);
  --bs-border-radius-lg: var(--mp-radius-lg);
  --bs-border-radius-pill: var(--mp-radius-pill);
  --bs-box-shadow: var(--mp-shadow);
  --bs-box-shadow-sm: var(--mp-shadow-sm);
  --bs-box-shadow-lg: var(--mp-shadow-lg);

  --bs-focus-ring-color: var(--mp-color-focus-ring);
  --bs-code-color: var(--mp-color-code);
}

a { color: var(--mp-color-link); }
a:hover { color: var(--mp-color-link-hover); }

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--mp-font-weight-semibold);
  line-height: var(--mp-line-height-tight);
}

/* Visible, consistent keyboard focus everywhere (WCAG 2.4.7 / 2.4.11). */
:focus-visible {
  outline: 2px solid var(--mp-color-primary);
  outline-offset: 2px;
}
.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 0.25rem var(--mp-color-focus-ring);
  border-color: var(--mp-color-primary);
}

/* ---- Buttons (Bootstrap compiles literal colors into .btn-*; re-point them at tokens) ---- */
.btn { font-weight: var(--mp-font-weight-medium); transition: all var(--mp-transition); }

.btn-primary {
  --bs-btn-color: var(--mp-color-on-primary);
  --bs-btn-bg: var(--mp-color-primary);
  --bs-btn-border-color: var(--mp-color-primary);
  --bs-btn-hover-color: var(--mp-color-on-primary);
  --bs-btn-hover-bg: var(--mp-color-primary-hover);
  --bs-btn-hover-border-color: var(--mp-color-primary-hover);
  --bs-btn-active-color: var(--mp-color-on-primary);
  --bs-btn-active-bg: var(--mp-color-primary-active);
  --bs-btn-active-border-color: var(--mp-color-primary-active);
  --bs-btn-disabled-color: var(--mp-color-on-primary);
  --bs-btn-disabled-bg: var(--mp-color-primary);
  --bs-btn-disabled-border-color: var(--mp-color-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--mp-color-link);
  --bs-btn-border-color: var(--mp-color-primary);
  --bs-btn-hover-color: var(--mp-color-on-primary);
  --bs-btn-hover-bg: var(--mp-color-primary);
  --bs-btn-hover-border-color: var(--mp-color-primary);
  --bs-btn-active-color: var(--mp-color-on-primary);
  --bs-btn-active-bg: var(--mp-color-primary-active);
  --bs-btn-active-border-color: var(--mp-color-primary-active);
}

.btn-secondary {
  --bs-btn-color: var(--mp-color-text);
  --bs-btn-bg: var(--mp-color-surface);
  --bs-btn-border-color: var(--mp-color-border-strong);
  --bs-btn-hover-color: var(--mp-color-text);
  --bs-btn-hover-bg: var(--mp-color-surface-muted);
  --bs-btn-hover-border-color: var(--mp-color-border-strong);
  --bs-btn-active-color: var(--mp-color-text);
  --bs-btn-active-bg: var(--mp-color-surface-muted);
  --bs-btn-active-border-color: var(--mp-color-border-strong);
}

.btn-danger {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: var(--mp-color-danger);
  --bs-btn-border-color: var(--mp-color-danger);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--mp-red-800);
  --bs-btn-hover-border-color: var(--mp-red-800);
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: var(--mp-red-800);
  --bs-btn-active-border-color: var(--mp-red-800);
}

/* ---- Surfaces ---- */
.card {
  --bs-card-bg: var(--mp-color-surface);
  --bs-card-border-color: var(--mp-color-border);
  --bs-card-border-radius: var(--mp-radius-lg);
  --bs-card-cap-bg: transparent;
  box-shadow: var(--mp-shadow-sm);
}

.form-control,
.form-select {
  background-color: var(--mp-color-surface);
  border-color: var(--mp-color-border-strong);
}

/* ---- ASP.NET Core MVC validation classes → Bootstrap look ---- */
.validation-summary-valid { display: none; }             /* hide the summary box when there are no errors */
.validation-summary-errors ul { margin: 0; padding-left: 1.25rem; }
.input-validation-error { border-color: var(--mp-color-danger) !important; }
.input-validation-error:focus { box-shadow: 0 0 0 0.25rem var(--mp-color-danger-subtle) !important; }
.field-validation-error { color: var(--mp-color-danger); }

.table {
  --bs-table-bg: var(--mp-color-surface);
  --bs-table-color: var(--mp-color-text);
  --bs-table-border-color: var(--mp-color-border);
  --bs-table-striped-bg: var(--mp-color-surface-muted);
  --bs-table-hover-bg: var(--mp-color-surface-muted);
}

/* ---- Alerts use the subtle status tokens ---- */
.alert-success { --bs-alert-bg: var(--mp-color-success-subtle); --bs-alert-color: var(--mp-color-text); --bs-alert-border-color: var(--mp-color-success); }
.alert-warning { --bs-alert-bg: var(--mp-color-warning-subtle); --bs-alert-color: var(--mp-color-text); --bs-alert-border-color: var(--mp-color-warning); }
.alert-danger  { --bs-alert-bg: var(--mp-color-danger-subtle);  --bs-alert-color: var(--mp-color-text); --bs-alert-border-color: var(--mp-color-danger); }
.alert-info    { --bs-alert-bg: var(--mp-color-info-subtle);    --bs-alert-color: var(--mp-color-text); --bs-alert-border-color: var(--mp-color-info); }
.alert { border-left-width: 4px; }