/* OneAIWorld design system: base layer.
   Scoped to html[data-oaiw-ui="new"]: a page opts in by setting {% block oaiw_ui %}new{% endblock %} in its template.
   Bootstrap 5.3 components read --bs-* variables, so most restyling is done by mapping our tokens onto them. */

html[data-oaiw-ui="new"] {
  --bs-body-bg: var(--oaiw-bg);
  --bs-body-color: var(--oaiw-text);
  --bs-body-font-family: var(--oaiw-font-sans);
  --bs-emphasis-color: var(--oaiw-text);
  --bs-secondary-color: var(--oaiw-text-muted);
  --bs-tertiary-color: var(--oaiw-text-faint);
  --bs-secondary-bg: var(--oaiw-surface-2);
  --bs-tertiary-bg: var(--oaiw-surface);
  --bs-border-color: var(--oaiw-line);
  --bs-border-radius: var(--oaiw-radius-sm);
  --bs-border-radius-lg: var(--oaiw-radius-lg);
  --bs-link-color: var(--oaiw-link);
  --bs-link-hover-color: var(--oaiw-accent);
  --bs-link-color-rgb: var(--oaiw-link-rgb);
  --bs-link-hover-color-rgb: var(--oaiw-accent-rgb);
  --bs-body-color-rgb: var(--oaiw-text-rgb);
  --bs-body-bg-rgb: var(--oaiw-bg-rgb);
  --bs-secondary-rgb: var(--oaiw-muted-rgb);
  --bs-primary-rgb: var(--oaiw-primary-rgb);
  --bs-primary: var(--oaiw-accent-fill);
  --bs-success: var(--oaiw-success);
  --bs-warning: var(--oaiw-warning);
  --bs-danger: var(--oaiw-danger);
  --bs-info: var(--oaiw-info);
  --bs-heading-color: var(--oaiw-text);
  --bs-code-color: var(--oaiw-accent);
  --bs-highlight-bg: rgba(255, 200, 61, .25);
}

html[data-oaiw-ui="new"] #oneaiworld-body {
  background: var(--oaiw-bg);
  color: var(--oaiw-text);
  font-family: var(--oaiw-font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ----- type ----- */
html[data-oaiw-ui="new"] h1, html[data-oaiw-ui="new"] h2, html[data-oaiw-ui="new"] h3,
html[data-oaiw-ui="new"] h4, html[data-oaiw-ui="new"] h5, html[data-oaiw-ui="new"] h6 {
  font-family: var(--oaiw-font-display);
  color: var(--oaiw-text);
  letter-spacing: -.02em;
  line-height: 1.12;
}
html[data-oaiw-ui="new"] h1 { font-size: var(--oaiw-h1); font-weight: 700; letter-spacing: -.035em; line-height: 1.02; }
html[data-oaiw-ui="new"] h2 { font-size: var(--oaiw-h2); font-weight: 700; }
html[data-oaiw-ui="new"] h3 { font-size: var(--oaiw-h3); font-weight: 600; }
/* Plain content links. Bootstrap's default link color turns dark on hover (invisible on the dark theme),
   so migrated pages restate it. :where() keeps components (buttons, menus, pills, our own .oaiw-* classes) out of it. */
html[data-oaiw-ui="new"] a:where(:not(.btn, .nav-link, .dropdown-item, .page-link, .navbar-brand, .list-group-item, .badge, [class*="oaiw-"])) { color: var(--oaiw-link); text-underline-offset: 3px; }
html[data-oaiw-ui="new"] a:where(:not(.btn, .nav-link, .dropdown-item, .page-link, .navbar-brand, .list-group-item, .badge, [class*="oaiw-"])):hover { color: var(--oaiw-accent); }
html[data-oaiw-ui="new"] ::selection { background: rgba(109, 179, 255, .35); }
html[data-oaiw-ui="new"] :focus-visible { outline: 3px solid var(--oaiw-accent); outline-offset: 3px; border-radius: 4px; }
html[data-oaiw-ui="new"] hr { border-color: var(--oaiw-line); opacity: 1; }
html[data-oaiw-ui="new"] code, html[data-oaiw-ui="new"] pre { font-family: var(--oaiw-font-mono); }

/* ----- buttons ----- */
/* Buttons are driven by Bootstrap's --bs-btn-* variables, so the Bootstrap
   variables alone are ignored. Restate the base so migrated pages honor --bs-btn-* again. */
html[data-oaiw-ui="new"] .btn {
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: var(--oaiw-radius);
  --bs-btn-color: var(--oaiw-text);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--oaiw-line-strong);
  --bs-btn-hover-color: var(--oaiw-text);
  --bs-btn-hover-bg: var(--oaiw-surface-hover);
  --bs-btn-hover-border-color: var(--oaiw-accent);
  --bs-btn-active-color: var(--oaiw-text);
  --bs-btn-active-bg: var(--oaiw-surface-hover);
  --bs-btn-active-border-color: var(--oaiw-accent);
  --bs-btn-disabled-color: var(--oaiw-text-muted);
  font-family: var(--oaiw-font-sans);
  letter-spacing: 0;
  color: var(--bs-btn-color);
  background: var(--bs-btn-bg);
  border: 1px solid var(--bs-btn-border-color);
  border-radius: var(--bs-btn-border-radius);
  white-space: normal;
  text-shadow: none;
  transition: transform var(--oaiw-fast) var(--oaiw-ease), box-shadow var(--oaiw-med) var(--oaiw-ease), background-color var(--oaiw-fast), border-color var(--oaiw-fast), color var(--oaiw-fast);
}
html[data-oaiw-ui="new"] .btn:hover { color: var(--bs-btn-hover-color); background: var(--bs-btn-hover-bg); border-color: var(--bs-btn-hover-border-color); text-decoration: none; }
html[data-oaiw-ui="new"] .btn:focus-visible { color: var(--bs-btn-hover-color); }
html[data-oaiw-ui="new"] .btn:active, html[data-oaiw-ui="new"] .btn.active, html[data-oaiw-ui="new"] .btn.show { color: var(--bs-btn-active-color); background: var(--bs-btn-active-bg); border-color: var(--bs-btn-active-border-color); }
html[data-oaiw-ui="new"] .btn:disabled, html[data-oaiw-ui="new"] .btn.disabled { color: var(--bs-btn-disabled-color, var(--bs-btn-color)); background: var(--bs-btn-disabled-bg, var(--bs-btn-bg)); border-color: var(--bs-btn-disabled-border-color, var(--bs-btn-border-color)); opacity: .55; box-shadow: none; }
html[data-oaiw-ui="new"] .btn:active { transform: translateY(1px); }
html[data-oaiw-ui="new"] .btn-primary {
  --bs-btn-color: var(--oaiw-on-accent);
  --bs-btn-hover-color: var(--oaiw-on-accent);
  --bs-btn-active-color: var(--oaiw-on-accent);
  --bs-btn-bg: var(--oaiw-accent-fill);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: var(--oaiw-accent-fill-hover);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: var(--oaiw-accent-fill-hover);
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-bg: var(--oaiw-accent-fill);
  --bs-btn-disabled-border-color: transparent;
  --bs-btn-disabled-color: var(--oaiw-on-accent);
  box-shadow: var(--oaiw-glow);
}
html[data-oaiw-ui="new"] .btn-primary:hover { transform: translateY(-2px); }
html[data-oaiw-ui="new"] .btn-secondary,
html[data-oaiw-ui="new"] .btn-default,
html[data-oaiw-ui="new"] .btn-outline-secondary {
  --bs-btn-color: var(--oaiw-text);
  --bs-btn-hover-color: var(--oaiw-text);
  --bs-btn-active-color: var(--oaiw-text);
  --bs-btn-bg: var(--oaiw-surface-2);
  --bs-btn-border-color: var(--oaiw-line-strong);
  --bs-btn-hover-bg: var(--oaiw-surface-hover);
  --bs-btn-hover-border-color: var(--oaiw-accent);
  --bs-btn-active-bg: var(--oaiw-surface-hover);
  --bs-btn-active-border-color: var(--oaiw-accent);
}
html[data-oaiw-ui="new"] .btn-outline-primary {
  --bs-btn-color: var(--oaiw-accent);
  --bs-btn-border-color: var(--oaiw-line-strong);
  --bs-btn-hover-bg: var(--oaiw-accent-fill);
  --bs-btn-hover-color: var(--oaiw-on-accent);
  --bs-btn-hover-border-color: var(--oaiw-accent-fill);
}
html[data-oaiw-ui="new"] .btn-danger { --bs-btn-bg: var(--oaiw-danger); --bs-btn-border-color: var(--oaiw-danger); --bs-btn-hover-bg: var(--oaiw-danger); --bs-btn-hover-border-color: var(--oaiw-danger); --bs-btn-color: #1a0508; --bs-btn-hover-color: #1a0508; --bs-btn-active-color: #1a0508; --bs-btn-active-bg: var(--oaiw-danger); --bs-btn-active-border-color: var(--oaiw-danger); }
html[data-oaiw-ui="new"] .btn-link { --bs-btn-color: var(--oaiw-link); --bs-btn-hover-color: var(--oaiw-accent); --bs-btn-border-color: transparent; --bs-btn-hover-border-color: transparent; --bs-btn-hover-bg: transparent; --bs-btn-active-bg: transparent; --bs-btn-active-border-color: transparent; }
html[data-oaiw-ui="new"] .btn-lg { --bs-btn-padding-y: .8rem; --bs-btn-padding-x: 1.6rem; --bs-btn-font-size: 1.05rem; }

/* ----- forms ----- */
html[data-oaiw-ui="new"] .form-control,
html[data-oaiw-ui="new"] .form-select {
  background-color: var(--oaiw-input-bg);
  color: var(--oaiw-text);
  border: 1px solid var(--oaiw-line-strong);
  border-radius: var(--oaiw-radius);
}
html[data-oaiw-ui="new"] .form-control::placeholder { color: var(--oaiw-text-faint); }
html[data-oaiw-ui="new"] .form-control:focus,
html[data-oaiw-ui="new"] .form-select:focus {
  background-color: var(--oaiw-input-bg);
  color: var(--oaiw-text);
  border-color: var(--oaiw-accent);
  box-shadow: 0 0 0 .22rem rgba(109, 179, 255, .28);
}
html[data-oaiw-ui="new"] .form-control:disabled, html[data-oaiw-ui="new"] .form-select:disabled { background-color: var(--oaiw-surface-2); opacity: .7; }
html[data-oaiw-ui="new"] .form-label, html[data-oaiw-ui="new"] label { font-weight: 500; }
html[data-oaiw-ui="new"] .form-text { color: var(--oaiw-text-muted); }
html[data-oaiw-ui="new"] .form-check-input { background-color: var(--oaiw-input-bg); border-color: var(--oaiw-line-strong); }
html[data-oaiw-ui="new"] .form-check-input:checked { background-color: var(--oaiw-accent-fill); border-color: var(--oaiw-accent-fill); }
html[data-oaiw-ui="new"] .input-group-text { background: var(--oaiw-surface-2); color: var(--oaiw-text-muted); border-color: var(--oaiw-line-strong); }
html[data-oaiw-ui="new"] .invalid-feedback { color: var(--oaiw-danger); }

/* ----- surfaces ----- */
html[data-oaiw-ui="new"] .card {
  --bs-card-bg: var(--oaiw-surface);
  --bs-card-border-color: var(--oaiw-line);
  --bs-card-border-radius: var(--oaiw-radius-lg);
  --bs-card-cap-bg: var(--oaiw-surface-2);
  --bs-card-color: var(--oaiw-text);
  box-shadow: var(--oaiw-shadow-sm);
}
html[data-oaiw-ui="new"] .card-header { font-family: var(--oaiw-font-display); font-weight: 600; background-color: var(--oaiw-surface-2); color: var(--oaiw-text); border-bottom-color: var(--oaiw-line); }   /* legacy main.css paints .card-header off-white */
html[data-oaiw-ui="new"] .content-section { background: var(--oaiw-surface); border: 1px solid var(--oaiw-line); border-radius: var(--oaiw-radius-lg); }
html[data-oaiw-ui="new"] .list-group { --bs-list-group-bg: var(--oaiw-surface); --bs-list-group-color: var(--oaiw-text); --bs-list-group-border-color: var(--oaiw-line); }
html[data-oaiw-ui="new"] .modal { --bs-modal-bg: var(--oaiw-surface); --bs-modal-color: var(--oaiw-text); --bs-modal-border-color: var(--oaiw-line-strong); --bs-modal-border-radius: var(--oaiw-radius-lg); --bs-modal-header-border-color: var(--oaiw-line); --bs-modal-footer-border-color: var(--oaiw-line); }
html[data-oaiw-ui="new"] .modal-backdrop { --bs-backdrop-bg: #020610; --bs-backdrop-opacity: .72; }
html[data-oaiw-ui="new"] .btn-close { filter: var(--oaiw-btn-close-filter, none); }
html[data-oaiw-ui="new"][data-oaiw-theme="dark"] .btn-close { --oaiw-btn-close-filter: invert(1) grayscale(100%) brightness(200%); }

/* ----- tables ----- */
html[data-oaiw-ui="new"] .table {
  --bs-table-color: var(--oaiw-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--oaiw-line);
  --bs-table-striped-bg: var(--oaiw-surface-2);
  --bs-table-striped-color: var(--oaiw-text);
  --bs-table-hover-bg: var(--oaiw-surface-hover);
  --bs-table-hover-color: var(--oaiw-text);
}
html[data-oaiw-ui="new"] .table > thead th {
  font-family: var(--oaiw-font-mono); font-size: var(--oaiw-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--oaiw-text-muted);
  border-bottom: 1px solid var(--oaiw-line-strong);
}
html[data-oaiw-ui="new"] .table-light { --bs-table-bg: var(--oaiw-surface-2); --bs-table-color: var(--oaiw-text); --bs-table-border-color: var(--oaiw-line); }

/* ----- menus, alerts, badges, progress ----- */
html[data-oaiw-ui="new"] .dropdown-menu {
  --bs-dropdown-bg: var(--oaiw-surface-2);
  --bs-dropdown-color: var(--oaiw-text);
  --bs-dropdown-border-color: var(--oaiw-line-strong);
  --bs-dropdown-border-radius: var(--oaiw-radius);
  --bs-dropdown-link-color: var(--oaiw-text);
  --bs-dropdown-link-hover-color: var(--oaiw-text);
  --bs-dropdown-link-hover-bg: var(--oaiw-surface-hover);
  --bs-dropdown-link-active-bg: var(--oaiw-accent-fill);
  --bs-dropdown-link-active-color: var(--oaiw-on-accent);
  --bs-dropdown-divider-bg: var(--oaiw-line);
  box-shadow: var(--oaiw-shadow);
}
html[data-oaiw-ui="new"] .alert { border-radius: var(--oaiw-radius); border-width: 1px; }
html[data-oaiw-ui="new"] .alert-info { --bs-alert-bg: rgba(109, 179, 255, .12); --bs-alert-border-color: rgba(109, 179, 255, .35); --bs-alert-color: var(--oaiw-text); }
html[data-oaiw-ui="new"] .alert-success { --bs-alert-bg: rgba(72, 224, 160, .12); --bs-alert-border-color: rgba(72, 224, 160, .35); --bs-alert-color: var(--oaiw-text); }
html[data-oaiw-ui="new"] .alert-warning { --bs-alert-bg: rgba(255, 200, 61, .13); --bs-alert-border-color: rgba(255, 200, 61, .4); --bs-alert-color: var(--oaiw-text); }
html[data-oaiw-ui="new"] .alert-danger { --bs-alert-bg: rgba(255, 93, 108, .12); --bs-alert-border-color: rgba(255, 93, 108, .4); --bs-alert-color: var(--oaiw-text); }
html[data-oaiw-ui="new"] .badge { font-weight: 600; letter-spacing: .02em; }
/* progress bars: the design-system height and shape */
html[data-oaiw-ui="new"] .progress {
  float: none; height: .7rem; margin: 0; overflow: hidden;
  background-color: var(--oaiw-surface-2); border-radius: var(--oaiw-radius-pill); box-shadow: inset 0 0 0 1px var(--oaiw-line);
}
html[data-oaiw-ui="new"] .progress-bar {
  float: none; height: 100%; background: linear-gradient(90deg, var(--oaiw-accent-fill), var(--oaiw-accent)); color: var(--oaiw-on-accent);
  box-shadow: none; text-shadow: none;
}
html[data-oaiw-ui="new"] .pagination { --bs-pagination-bg: var(--oaiw-surface); --bs-pagination-color: var(--oaiw-text); --bs-pagination-border-color: var(--oaiw-line); --bs-pagination-hover-bg: var(--oaiw-surface-hover); --bs-pagination-hover-color: var(--oaiw-text); --bs-pagination-hover-border-color: var(--oaiw-line-strong); --bs-pagination-active-bg: var(--oaiw-accent-fill); --bs-pagination-active-border-color: var(--oaiw-accent-fill); --bs-pagination-active-color: var(--oaiw-on-accent); --bs-pagination-disabled-bg: var(--oaiw-surface); --bs-pagination-disabled-color: var(--oaiw-text-faint); --bs-pagination-disabled-border-color: var(--oaiw-line); }
html[data-oaiw-ui="new"] .nav-pills { --bs-nav-pills-link-active-bg: var(--oaiw-accent-fill); --bs-nav-pills-link-active-color: var(--oaiw-on-accent); --bs-nav-link-color: var(--oaiw-text-muted); --bs-nav-link-hover-color: var(--oaiw-text); }
html[data-oaiw-ui="new"] .nav-tabs { --bs-nav-tabs-border-color: var(--oaiw-line); --bs-nav-tabs-link-active-bg: var(--oaiw-surface); --bs-nav-tabs-link-active-color: var(--oaiw-text); --bs-nav-tabs-link-active-border-color: var(--oaiw-line) var(--oaiw-line) var(--oaiw-surface); --bs-nav-link-color: var(--oaiw-text-muted); }
html[data-oaiw-ui="new"] .breadcrumb { --bs-breadcrumb-divider-color: var(--oaiw-text-faint); --bs-breadcrumb-item-active-color: var(--oaiw-text-muted); }

/* ----- bootstrap-select (used for the model pickers) -----
   Scoped under html[data-oaiw-ui] so it out-ranks bootstrap-select's own stylesheet. */
html[data-oaiw-ui="new"] .bootstrap-select > .dropdown-toggle { background-color: var(--oaiw-input-bg); color: var(--oaiw-text); border: 1px solid var(--oaiw-line-strong); border-radius: var(--oaiw-radius); }
html[data-oaiw-ui="new"] .bootstrap-select > .dropdown-toggle:focus, html[data-oaiw-ui="new"] .bootstrap-select.show > .dropdown-toggle { border-color: var(--oaiw-accent); box-shadow: 0 0 0 .2rem rgba(var(--oaiw-accent-rgb), .25); outline: 0 !important; }
html[data-oaiw-ui="new"] .bootstrap-select > .dropdown-toggle::after, html[data-oaiw-ui="new"] .bootstrap-select > .dropdown-toggle:hover::after { color: var(--oaiw-text-faint); }
html[data-oaiw-ui="new"] .bootstrap-select .filter-option-inner-inner { color: var(--oaiw-text); }
html[data-oaiw-ui="new"] .bootstrap-select .dropdown-menu { background: var(--oaiw-surface-2); border: 1px solid var(--oaiw-line-strong); box-shadow: var(--oaiw-shadow); }
html[data-oaiw-ui="new"] .bootstrap-select .dropdown-menu li a, html[data-oaiw-ui="new"] .bootstrap-select .dropdown-item { color: var(--oaiw-text); }
html[data-oaiw-ui="new"] .bootstrap-select .dropdown-menu li a:hover, html[data-oaiw-ui="new"] .bootstrap-select .dropdown-menu .active, html[data-oaiw-ui="new"] .bootstrap-select .dropdown-item.active, html[data-oaiw-ui="new"] .bootstrap-select .dropdown-item:active { background: var(--oaiw-surface-hover); color: var(--oaiw-text); }
html[data-oaiw-ui="new"] .bootstrap-select .dropdown-item .text-muted { color: var(--oaiw-text-faint) !important; }
html[data-oaiw-ui="new"] .bootstrap-select .bs-searchbox .form-control { background: var(--oaiw-input-bg); }
html[data-oaiw-ui="new"] .bootstrap-select .bs-actionsbox .btn { color: var(--oaiw-text); background: var(--oaiw-surface); border: 1px solid var(--oaiw-line); }
html[data-oaiw-ui="new"] .bootstrap-select .no-results { color: var(--oaiw-text-muted); background: transparent; }

/* respect the visitor's motion preference everywhere */
@media (prefers-reduced-motion: reduce) {
  html[data-oaiw-ui="new"] *, html[data-oaiw-ui="new"] *::before, html[data-oaiw-ui="new"] *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}


/* Bootstrap's fixed-colour utilities would stay white or black in dark mode; map them onto the theme so migrated pages
   can keep markup like class="bg-light" or class="text-dark" safely. */
html[data-oaiw-ui="new"] :is(.bg-light, .bg-white, .bg-body) { background-color: var(--oaiw-surface) !important; color: var(--oaiw-text); }
html[data-oaiw-ui="new"] .text-dark { color: var(--oaiw-text) !important; }
html[data-oaiw-ui="new"] .text-muted { color: var(--oaiw-text-muted) !important; }
html[data-oaiw-ui="new"] .border, html[data-oaiw-ui="new"] :is(.border-top, .border-bottom, .border-start, .border-end) { border-color: var(--oaiw-line) !important; }
html[data-oaiw-ui="new"] .shadow-sm { box-shadow: var(--oaiw-shadow-sm) !important; }

/* white text on the danger fill in light theme (the dark on-accent text is only 3.5:1 there) */
html[data-oaiw-ui="new"][data-oaiw-theme="light"] .btn-danger { --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; color: #fff; }

/* Bootstrap's .h1-.h6 utility classes: they must win over the element rules above so a semantic h2 can look like an h5 */
html[data-oaiw-ui="new"] :is(h1, h2, h3, h4, h5, h6, p, div, span).h1 { font-size: var(--oaiw-h1); }
html[data-oaiw-ui="new"] :is(h1, h2, h3, h4, h5, h6, p, div, span).h2 { font-size: var(--oaiw-h2); }
html[data-oaiw-ui="new"] :is(h1, h2, h3, h4, h5, h6, p, div, span).h3 { font-size: var(--oaiw-h3); }
html[data-oaiw-ui="new"] :is(h1, h2, h3, h4, h5, h6, p, div, span).h4 { font-size: 1.3rem; }
html[data-oaiw-ui="new"] :is(h1, h2, h3, h4, h5, h6, p, div, span).h5 { font-size: 1.1rem; }
html[data-oaiw-ui="new"] :is(h1, h2, h3, h4, h5, h6, p, div, span).h6 { font-size: .95rem; }

/* Badge and warning-header text: Bootstrap paints these white on light fills (fails AA); pick dark ink on the light fills. */
/* !important: the dark theme remaps .text-dark to the light ink, which would win on a yellow badge */
html[data-oaiw-ui="new"] .badge:is(.bg-info, .bg-warning) { --bs-badge-color: #06101f; color: #06101f !important; }   /* .bg-light is left alone: the dark theme remaps it to a dark surface */
html[data-oaiw-ui="new"][data-oaiw-theme="dark"] .badge:is(.bg-secondary, .bg-primary) { --bs-badge-color: #06101f; color: #06101f; }
html[data-oaiw-ui="new"] .card-header:is(.bg-warning, .bg-info), html[data-oaiw-ui="new"] .card-header:is(.bg-warning, .bg-info) :is(h1, h2, h3, h4, h5, h6) { color: #1a1200 !important; }

/* Card headers painted with Bootstrap fills: pick an ink that passes AA in each theme */
html[data-oaiw-ui="new"][data-oaiw-theme="dark"] .card-header.bg-secondary, html[data-oaiw-ui="new"][data-oaiw-theme="dark"] .card-header.bg-secondary :is(h1, h2, h3, h4, h5, h6) { color: #06101f !important; }
html[data-oaiw-ui="new"] .card-header:is(.bg-success, .bg-danger, .text-white) :is(h1, h2, h3, h4, h5, h6) { color: #fff; }

/* Base type is a normal 16px on phones, so keep data tables compact there. */
@media (max-width: 767.98px) { html[data-oaiw-ui="new"] .table { font-size: .875rem; } html[data-oaiw-ui="new"] .table .badge { font-size: .72rem; } }

/* Bootstrap's semantic text colors are fixed hues that fail contrast on the light theme (cyan on white is 1.95:1);
   use the theme-aware status tokens instead. */
html[data-oaiw-ui="new"] .text-info { color: var(--oaiw-info) !important; }
html[data-oaiw-ui="new"] .text-success { color: var(--oaiw-success) !important; }
html[data-oaiw-ui="new"] .text-warning { color: var(--oaiw-warning) !important; }
html[data-oaiw-ui="new"] .text-danger { color: var(--oaiw-danger) !important; }