/* CloudAxian theme layer.
 *
 * Bootstrap is vendored and READ-ONLY (RULES.md 3.11.1). Everything that makes
 * Bootstrap look like CloudAxian happens here, by overriding Bootstrap's own
 * component variables from our tokens.
 *
 * Note: overriding --bs-primary alone does NOT retheme components. Bootstrap
 * compiles literal values into each component's variables, so each component is
 * remapped explicitly below (3.11.2).
 */

/* ---------------------------------------------------------------- globals */
:root {
  --bs-body-font-family: var(--font-ui);
  --bs-body-font-size: 0.8125rem;        /* 13px — the density decision (3.3) */
  --bs-body-line-height: var(--leading-prose);
  --bs-body-color: var(--text-primary);
  --bs-body-bg: var(--surface-2);
  --bs-secondary-color: var(--text-secondary);
  --bs-tertiary-color: var(--text-muted);
  --bs-emphasis-color: var(--text-primary);
  --bs-border-color: var(--border-subtle);
  --bs-border-color-translucent: var(--border-subtle);
  --bs-border-radius: var(--radius-card);
  --bs-border-radius-sm: var(--radius-control);
  --bs-border-radius-lg: var(--radius-card);
  --bs-primary: var(--accent);
  --bs-primary-rgb: 79, 70, 229;
  --bs-link-color: var(--accent);
  --bs-link-hover-color: var(--accent-hover);
  --bs-font-monospace: var(--font-mono);
  --bs-heading-color: var(--text-primary);
  --bs-secondary-bg: var(--surface-3);
  --bs-tertiary-bg: var(--surface-3);
  --bs-emphasis-color-rgb: 15, 23, 42;
}

:root[data-bs-theme="dark"] {
  --bs-primary-rgb: 129, 140, 248;
  --bs-emphasis-color-rgb: 241, 245, 249;
}

body {
  background: var(--surface-2);
  color: var(--text-primary);
  font-size: var(--text-body);
}

h1, .h1 { font-size: var(--text-display); font-weight: 600; letter-spacing: -0.01em; }
h2, .h2 { font-size: var(--text-title); font-weight: 600; letter-spacing: -0.01em; }
h3, .h3 { font-size: var(--text-heading); font-weight: 600; }
h4, .h4, h5, .h5 { font-size: var(--text-body); font-weight: 600; }

.text-muted { color: var(--text-muted) !important; }
.font-monospace { font-variant-numeric: tabular-nums; }

.cx-eyebrow {
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------------------------------------------------------------- buttons */
.btn {
  --bs-btn-padding-y: var(--space-1);
  --bs-btn-padding-x: var(--space-3);
  --bs-btn-font-size: var(--text-body);
  --bs-btn-font-weight: 500;
  --bs-btn-border-radius: var(--radius-control);
  --bs-btn-line-height: 1.6;
  transition: background-color var(--motion-state) var(--easing),
              border-color var(--motion-state) var(--easing);
}

.btn-sm { --bs-btn-padding-y: 2px; --bs-btn-padding-x: var(--space-2); --bs-btn-font-size: var(--text-micro); }
.btn-lg { --bs-btn-padding-y: var(--space-2); --bs-btn-padding-x: var(--space-4); --bs-btn-font-size: var(--text-heading); }

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

.btn-secondary, .btn-outline-secondary {
  --bs-btn-bg: var(--surface-1);
  --bs-btn-border-color: var(--border-strong);
  --bs-btn-color: var(--text-primary);
  --bs-btn-hover-bg: var(--surface-3);
  --bs-btn-hover-border-color: var(--border-strong);
  --bs-btn-hover-color: var(--text-primary);
  --bs-btn-active-bg: var(--surface-3);
  --bs-btn-active-border-color: var(--border-strong);
  --bs-btn-active-color: var(--text-primary);
  --bs-btn-disabled-bg: var(--surface-1);
  --bs-btn-disabled-border-color: var(--border-subtle);
  --bs-btn-disabled-color: var(--text-muted);
}

.btn-light {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-color: var(--text-secondary);
  --bs-btn-hover-bg: var(--surface-3);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-hover-color: var(--text-primary);
  --bs-btn-active-bg: var(--surface-3);
  --bs-btn-active-color: var(--text-primary);
}

.btn-danger, .btn-outline-danger {
  --bs-btn-bg: var(--surface-1);
  --bs-btn-border-color: var(--status-error);
  --bs-btn-color: var(--status-error);
  --bs-btn-hover-bg: var(--status-error-bg);
  --bs-btn-hover-border-color: var(--status-error);
  --bs-btn-hover-color: var(--status-error);
  --bs-btn-active-bg: var(--status-error-bg);
  --bs-btn-active-border-color: var(--status-error);
  --bs-btn-active-color: var(--status-error);
  --bs-btn-disabled-bg: var(--surface-1);
  --bs-btn-disabled-border-color: var(--border-subtle);
  --bs-btn-disabled-color: var(--text-muted);
}

.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; }
.btn-check:focus + .btn, .btn:focus { box-shadow: none; }

/* ------------------------------------------------------------------ cards */
.card {
  --bs-card-bg: var(--surface-1);
  --bs-card-border-color: var(--border-subtle);
  --bs-card-border-radius: var(--radius-card);
  --bs-card-inner-border-radius: var(--radius-card);
  --bs-card-spacer-y: var(--space-4);
  --bs-card-spacer-x: var(--space-4);
  --bs-card-cap-bg: var(--surface-1);
  --bs-card-cap-padding-y: var(--space-3);
  --bs-card-cap-padding-x: var(--space-4);
  box-shadow: none;   /* elevation is borders, not shadows (3.7) */
}

/* Signature: a 2px accent tick at the head of every card header, so a page of
 * cards has a consistent reading edge instead of relying on weight alone. */
.card-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  font-weight: 600;
}

.card-header::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 14px;
  transform: translateY(-50%);
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  background: var(--accent);
}

.card-header .card-title {
  margin: 0;
  font-size: var(--text-body);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.card-header .text-muted { font-size: var(--text-micro); font-weight: 400; }

/* ----------------------------------------------------------------- tables */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text-primary);
  --bs-table-border-color: var(--border-subtle);
  --bs-table-hover-bg: var(--surface-2);
  --bs-table-hover-color: var(--text-primary);
  --bs-table-striped-bg: var(--surface-2);
  font-size: var(--text-body);
  line-height: var(--leading-table);
  margin-bottom: 0;
}

.table > :not(caption) > * > * { padding: var(--row-padding-y) var(--space-3); }

.table > thead th {
  position: relative;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-strong);
  color: var(--text-muted);
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}

.table td { vertical-align: middle; }
.table .cx-num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.table .cx-mono { font-family: var(--font-mono); }

.table-hover > tbody > tr:hover > * { background: var(--surface-2); }

/* ---------------------------------------------------------- checks/switches
 * Bootstrap compiles #0d6efd into these, so an unthemed checkbox is a blue that
 * belongs to no other part of the product. Every state is remapped.
 */
.form-check-input {
  --bs-form-check-bg: var(--surface-1);
  border-color: var(--border-strong);
  cursor: pointer;
}

.form-check-input:hover { border-color: var(--text-muted); }

.form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}

.form-check-input:indeterminate {
  background-color: var(--accent);
  border-color: var(--accent);
}

.form-check-input:focus {
  border-color: var(--accent);
  box-shadow: none;
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.form-check-input:disabled { opacity: 0.5; }
.form-check-label { cursor: pointer; }
.form-switch .form-check-input:checked { background-color: var(--accent); }

/* ------------------------------------------------------------------ forms */
.form-control, .form-select {
  --bs-border-color: var(--border-strong);
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: var(--text-body);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-control);
}

.form-control:focus, .form-select:focus {
  border-color: var(--accent);
  box-shadow: none;
  outline: 2px solid var(--accent);
  outline-offset: 0;
}

.form-label {
  margin-bottom: var(--space-1);
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.input-group-text {
  background: var(--surface-3);
  border-color: var(--border-strong);
  color: var(--text-muted);
  font-size: var(--text-body);
}

/* --------------------------------------------------------- nav and tabs */
.nav-tabs {
  --bs-nav-tabs-border-color: var(--border-subtle);
  --bs-nav-tabs-link-active-bg: transparent;
  --bs-nav-tabs-link-active-border-color: transparent transparent var(--accent);
  --bs-nav-tabs-link-active-color: var(--accent);
  --bs-nav-link-color: var(--text-secondary);
  --bs-nav-link-hover-color: var(--text-primary);
  --bs-nav-link-font-size: var(--text-body);
  --bs-nav-link-font-weight: 500;
  --bs-nav-link-padding-y: var(--space-2);
  --bs-nav-link-padding-x: var(--space-3);
  gap: var(--space-1);
}

.nav-tabs .nav-link { border-width: 0 0 2px; border-radius: 0; }
.nav-tabs .nav-link:hover { border-bottom-color: var(--border-strong); }
.nav-tabs .nav-link .badge { margin-left: var(--space-2); }

.nav-pills {
  --bs-nav-pills-border-radius: var(--radius-control);
  --bs-nav-pills-link-active-bg: var(--accent);
  --bs-nav-pills-link-active-color: var(--accent-contrast);
  --bs-nav-link-color: var(--text-secondary);
  --bs-nav-link-font-size: var(--text-body);
}

/* -------------------------------------------------- dropdown / modal / oc */
.dropdown-menu {
  --bs-dropdown-bg: var(--surface-1);
  --bs-dropdown-border-color: var(--border-subtle);
  --bs-dropdown-border-radius: var(--radius-card);
  --bs-dropdown-link-color: var(--text-secondary);
  --bs-dropdown-link-hover-bg: var(--surface-3);
  --bs-dropdown-link-hover-color: var(--text-primary);
  --bs-dropdown-link-active-bg: var(--surface-3);
  --bs-dropdown-link-active-color: var(--text-primary);
  --bs-dropdown-font-size: var(--text-body);
  --bs-dropdown-padding-y: var(--space-1);
  --bs-dropdown-item-padding-y: var(--space-2);
  --bs-dropdown-item-padding-x: var(--space-3);
  --bs-dropdown-divider-bg: var(--border-subtle);
  box-shadow: var(--shadow-float);   /* permitted: floating layer (3.7) */
}

.dropdown-item.cx-danger { color: var(--status-error); }
.dropdown-item.cx-danger:hover { background: var(--status-error-bg); color: var(--status-error); }

.dropdown-header {
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.modal-content {
  --bs-modal-bg: var(--surface-1);
  --bs-modal-border-color: var(--border-subtle);
  --bs-modal-border-radius: var(--radius-card);
  --bs-modal-header-padding: var(--space-4);
  --bs-modal-padding: var(--space-4);
  box-shadow: var(--shadow-float);
}

.modal-header { border-bottom-color: var(--border-subtle); }
.modal-footer { border-top-color: var(--border-subtle); gap: var(--space-2); }
.modal-title { font-size: var(--text-heading); font-weight: 600; }

.offcanvas {
  --bs-offcanvas-bg: var(--surface-1);
  --bs-offcanvas-border-color: var(--border-subtle);
  --bs-offcanvas-padding-y: var(--space-4);
  --bs-offcanvas-padding-x: var(--space-4);
  --bs-offcanvas-width: 460px;
}

.offcanvas-header { border-bottom: 1px solid var(--border-subtle); }
.offcanvas-title { font-size: var(--text-heading); font-weight: 600; }

/* --------------------------------------------------------------- tooltips */
.tooltip {
  --bs-tooltip-bg: var(--text-primary);
  --bs-tooltip-color: var(--surface-1);
  --bs-tooltip-font-size: var(--text-micro);
  --bs-tooltip-border-radius: var(--radius-control);
}

/* ------------------------------------------------------------- pagination */
.pagination {
  --bs-pagination-font-size: var(--text-body);
  --bs-pagination-padding-y: var(--space-1);
  --bs-pagination-padding-x: var(--space-2);
  --bs-pagination-color: var(--text-secondary);
  --bs-pagination-bg: var(--surface-1);
  --bs-pagination-border-color: var(--border-subtle);
  --bs-pagination-hover-bg: var(--surface-3);
  --bs-pagination-hover-color: var(--text-primary);
  --bs-pagination-hover-border-color: var(--border-subtle);
  --bs-pagination-active-bg: var(--accent);
  --bs-pagination-active-border-color: var(--accent);
  --bs-pagination-active-color: var(--accent-contrast);
  --bs-pagination-disabled-bg: var(--surface-1);
  --bs-pagination-disabled-color: var(--text-muted);
  --bs-pagination-disabled-border-color: var(--border-subtle);
  --bs-pagination-border-radius: var(--radius-control);
}

/* ------------------------------------------- remaining Bootstrap blue leaks
 * Bootstrap compiles #0d6efd into these components too. Each is remapped so no
 * control on the page carries a colour from outside our palette.
 */
.form-range::-webkit-slider-thumb { background-color: var(--accent); }
.form-range::-moz-range-thumb { background-color: var(--accent); }

.dropdown-menu { --bs-dropdown-link-active-bg: var(--surface-3); }
.dropdown-item.active, .dropdown-item:active {
  background: var(--surface-selected);
  color: var(--accent);
  font-weight: 600;
}

.progress { --bs-progress-bar-bg: var(--accent); --bs-progress-bg: var(--surface-3); }

.list-group {
  --bs-list-group-active-bg: var(--accent);
  --bs-list-group-active-border-color: var(--accent);
  --bs-list-group-color: var(--text-secondary);
  --bs-list-group-bg: var(--surface-1);
  --bs-list-group-border-color: var(--border-subtle);
  --bs-list-group-action-hover-bg: var(--surface-3);
}

/* the active tab in a Bootstrap tablist */
.nav-tabs .nav-link.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ------------------------------------------------------------------ alerts */
.alert {
  --bs-alert-border-radius: var(--radius-card);
  --bs-alert-padding-y: var(--space-3);
  --bs-alert-padding-x: var(--space-4);
  border-width: 1px;
  font-size: var(--text-body);
}

.alert-warning { background: var(--status-warning-bg); border-color: var(--status-warning); color: var(--status-warning); }
.alert-danger { background: var(--status-error-bg); border-color: var(--status-error); color: var(--status-error); }
.alert-info { background: var(--status-pending-bg); border-color: var(--status-pending); color: var(--status-pending); }
.alert-success { background: var(--status-running-bg); border-color: var(--status-running); color: var(--status-running); }

/* ------------------------------------------------------------------ focus */
/* Signature: a double ring — a 1px surface gap inside a 2px accent ring — so
 * focus reads clearly on both light rows and dark ones (RULES.md 3.10). */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 1px var(--surface-1);
}

.form-control:focus-visible, .form-select:focus-visible { outline-offset: 0; }

/* numbers are read in columns, so they are always tabular and never wander */
.cx-num, .cx-mono, td.cx-num, .cx-tile__value, .cx-kv__value .cx-mono {
  font-variant-numeric: tabular-nums slashed-zero;
}