/* Dark-theme contrast completion. Loaded after theme-components.css.
 * Keep these rules screen-only and scoped: no image inversion, no rewritten
 * inline styles, no changes to print/export colours or application behaviour.
 */
@media screen {
  /* Complete the semantic utility families used by PHP and dynamic renderers.
   * In particular, hover:bg-amber/rose/emerald-100 previously restored a pale
   * background underneath the light dark-theme foreground.
   */
  html[data-rd-theme="dark"] :is(.bg-amber-50, .bg-amber-100, .bg-amber-200, .bg-yellow-50, .bg-yellow-100, .bg-yellow-200, .bg-orange-50, .bg-orange-100, .bg-orange-200,
    .hover\:bg-amber-50:hover, .hover\:bg-amber-100:hover, .hover\:bg-amber-200:hover, .hover\:bg-yellow-50:hover, .hover\:bg-yellow-100:hover, .hover\:bg-orange-50:hover, .hover\:bg-orange-100:hover) { background-color: var(--rd-warning-bg); }
  html[data-rd-theme="dark"] :is(.bg-rose-50, .bg-rose-100, .bg-rose-200, .bg-red-50, .bg-red-100, .bg-red-200, .bg-pink-50, .bg-pink-100, .bg-pink-200,
    .hover\:bg-rose-50:hover, .hover\:bg-rose-100:hover, .hover\:bg-rose-200:hover, .hover\:bg-red-50:hover, .hover\:bg-red-100:hover, .hover\:bg-pink-50:hover, .hover\:bg-pink-100:hover) { background-color: var(--rd-danger-bg); }
  html[data-rd-theme="dark"] :is(.bg-emerald-50, .bg-emerald-100, .bg-emerald-200, .bg-green-50, .bg-green-100, .bg-green-200, .bg-teal-50, .bg-teal-100, .bg-teal-200, .bg-lime-50, .bg-lime-100,
    .hover\:bg-emerald-50:hover, .hover\:bg-emerald-100:hover, .hover\:bg-emerald-200:hover, .hover\:bg-green-50:hover, .hover\:bg-green-100:hover, .hover\:bg-teal-50:hover, .hover\:bg-teal-100:hover, .hover\:bg-lime-50:hover, .hover\:bg-lime-100:hover) { background-color: var(--rd-success-bg); }
  html[data-rd-theme="dark"] :is(.bg-blue-50, .bg-blue-100, .bg-blue-200, .bg-sky-50, .bg-sky-100, .bg-sky-200, .bg-cyan-50, .bg-cyan-100, .bg-cyan-200,
    .hover\:bg-blue-50:hover, .hover\:bg-blue-100:hover, .hover\:bg-blue-200:hover, .hover\:bg-sky-50:hover, .hover\:bg-sky-100:hover, .hover\:bg-cyan-50:hover, .hover\:bg-cyan-100:hover) { background-color: var(--rd-info-bg); }
  html[data-rd-theme="dark"] :is(.bg-indigo-50, .bg-indigo-100, .bg-indigo-200, .bg-violet-50, .bg-violet-100, .bg-violet-200, .bg-purple-50, .bg-purple-100, .bg-purple-200, .bg-fuchsia-50, .bg-fuchsia-100,
    .hover\:bg-indigo-50:hover, .hover\:bg-indigo-100:hover, .hover\:bg-violet-50:hover, .hover\:bg-violet-100:hover, .hover\:bg-purple-50:hover, .hover\:bg-purple-100:hover, .hover\:bg-fuchsia-50:hover, .hover\:bg-fuchsia-100:hover) { background-color: #27264f; }

  html[data-rd-theme="dark"] :is(.text-amber-400, .text-amber-950, .text-yellow-400, .text-yellow-950, .text-orange-400, .text-orange-900, .text-orange-950,
    .hover\:text-amber-600:hover, .hover\:text-amber-700:hover, .hover\:text-amber-800:hover, .hover\:text-orange-600:hover, .hover\:text-orange-700:hover) { color: var(--rd-warning-text); }
  html[data-rd-theme="dark"] :is(.text-rose-400, .text-rose-900, .text-rose-950, .text-red-400, .text-red-950, .text-pink-400, .text-pink-500, .text-pink-800, .text-pink-900,
    .hover\:text-rose-600:hover, .hover\:text-rose-700:hover, .hover\:text-rose-800:hover, .hover\:text-red-600:hover, .hover\:text-red-700:hover, .hover\:text-red-800:hover) { color: var(--rd-danger-text); }
  html[data-rd-theme="dark"] :is(.text-emerald-400, .text-emerald-950, .text-green-400, .text-green-950, .text-teal-400, .text-teal-500, .text-teal-800, .text-teal-900, .text-lime-500, .text-lime-600, .text-lime-700, .text-lime-800, .text-lime-900,
    .hover\:text-emerald-600:hover, .hover\:text-emerald-700:hover, .hover\:text-emerald-800:hover, .hover\:text-green-600:hover, .hover\:text-green-700:hover, .hover\:text-teal-700:hover) { color: var(--rd-success-text); }
  html[data-rd-theme="dark"] :is(.text-blue-400, .text-blue-950, .text-sky-400, .text-sky-500, .text-sky-900, .text-cyan-400, .text-cyan-500, .text-cyan-600, .text-cyan-700, .text-cyan-800, .text-cyan-900,
    .hover\:text-blue-500:hover, .hover\:text-blue-600:hover, .hover\:text-blue-900:hover, .hover\:text-sky-600:hover, .hover\:text-sky-700:hover, .hover\:text-cyan-700:hover) { color: var(--rd-info-text); }
  html[data-rd-theme="dark"] :is(.text-indigo-400, .text-indigo-950, .text-purple-400, .text-purple-500, .text-purple-900, .text-violet-400, .text-violet-500, .text-violet-800, .text-violet-900, .text-fuchsia-500, .text-fuchsia-600, .text-fuchsia-700, .text-fuchsia-800, .text-fuchsia-900,
    .hover\:text-indigo-600:hover, .hover\:text-indigo-700:hover, .hover\:text-indigo-800:hover, .hover\:text-purple-600:hover, .hover\:text-purple-700:hover, .hover\:text-purple-800:hover, .hover\:text-violet-900:hover) { color: #ddd6fe; }
  html[data-rd-theme="dark"] :is(.hover\:text-slate-500:hover, .hover\:text-slate-600:hover, .hover\:text-slate-800:hover, .hover\:text-gray-500:hover, .hover\:text-gray-600:hover, .hover\:text-gray-800:hover) { color: var(--rd-text); }

  /* White labels on amber/green/orange 500/600 actions were low contrast even
   * before theming. Scope to the white-label pair, not decorative colour swatches.
   */
  html[data-rd-theme="dark"] .text-white:is(.bg-amber-500, .bg-amber-600, .bg-yellow-500, .bg-yellow-600) { background-color: #a16207; }
  html[data-rd-theme="dark"] .text-white:is(.bg-amber-500, .bg-amber-600, .bg-yellow-500, .bg-yellow-600):hover { background-color: #854d0e; }
  html[data-rd-theme="dark"] .text-white:is(.bg-orange-500, .bg-orange-600) { background-color: #c2410c; }
  html[data-rd-theme="dark"] .text-white:is(.bg-orange-500, .bg-orange-600):hover { background-color: #9a3412; }
  html[data-rd-theme="dark"] .text-white:is(.bg-green-500, .bg-green-600, .bg-emerald-500, .bg-emerald-600) { background-color: #047857; }
  html[data-rd-theme="dark"] .text-white:is(.bg-green-500, .bg-green-600, .bg-emerald-500, .bg-emerald-600):hover { background-color: #065f46; }
  html[data-rd-theme="dark"] .text-white:is(.bg-teal-500, .bg-teal-600, .bg-cyan-500, .bg-cyan-600, .bg-sky-500, .bg-sky-600) { background-color: #0e7490; }
  html[data-rd-theme="dark"] .text-white:is(.bg-teal-500, .bg-teal-600, .bg-cyan-500, .bg-cyan-600, .bg-sky-500, .bg-sky-600):hover { background-color: #155e75; }
  html[data-rd-theme="dark"] .text-white.bg-blue-500 { background-color: #2563eb; }
  html[data-rd-theme="dark"] .text-white.bg-blue-500:hover { background-color: #1d4ed8; }

  /* Keep the legacy-named brand asset on its own light surface.
   * Give only this asset a deliberate compact plaque; preserve brand pixels.
   * The explicit filename also covers login and pages without the shared topbar.
   */
  html[data-rd-theme="dark"] img[src$="logo-1695872343.jpg"] {
    background: #fff; border: 1px solid #cbd5e1; border-radius: .5rem;
    padding: 5px 8px; box-sizing: content-box; max-width: calc(100% - 18px);
    object-fit: contain;
  }
  html[data-rd-theme="dark"] .app-top-bar__logo-image { max-height: 36px; width: auto; }

  /* Select2's portaled search/disabled/clear states need their own specificity. */
  html[data-rd-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field,
  html[data-rd-theme="dark"] .select2-container--default .select2-search--inline .select2-search__field { background: var(--rd-surface); color: var(--rd-text); border-color: var(--rd-border); }
  html[data-rd-theme="dark"] .select2-container--default .select2-results__option[aria-disabled="true"] { color: var(--rd-muted); }
  html[data-rd-theme="dark"] .select2-container--default .select2-selection__choice__remove:hover { background: var(--rd-raised); color: var(--rd-text); }
  html[data-rd-theme="dark"] .select2-container--default.select2-container--disabled :is(.select2-selection--single, .select2-selection--multiple) { background: var(--rd-raised); }
  html[data-rd-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b { border-top-color: var(--rd-muted); }
  html[data-rd-theme="dark"] .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-top-color: transparent; border-bottom-color: var(--rd-muted); }

  /* The formulation list has ID-qualified page CSS as well as DataTables CSS. */
  html[data-rd-theme="dark"][data-rd-page="formulation"] #example thead th { background: var(--rd-raised); color: var(--rd-text); border-color: var(--rd-border); }
  html[data-rd-theme="dark"][data-rd-page="formulation"] #example tbody tr { background: var(--rd-surface); color: var(--rd-text); }
  html[data-rd-theme="dark"][data-rd-page="formulation"] #example tbody tr:nth-child(even) { background: var(--rd-canvas); }
  html[data-rd-theme="dark"][data-rd-page="formulation"] #example tbody tr:hover { background: var(--rd-raised); }
  html[data-rd-theme="dark"][data-rd-page="formulation"] #example tbody tr.selected { background: var(--rd-info-bg); color: var(--rd-info-text); }
  html[data-rd-theme="dark"][data-rd-page="formulation"] #example tbody tr > :is(.sorting_1, .sorting_2, .sorting_3) { background: transparent; }
  html[data-rd-theme="dark"][data-rd-page="formulation"] .filter-label { color: var(--rd-muted); }
  html[data-rd-theme="dark"][data-rd-page="formulation"] .dt-col-resize-handle::before { background: var(--rd-border); }
  html[data-rd-theme="dark"][data-rd-page="formulation"] .dt-col-resize-handle:hover::before { background: var(--rd-focus); }
  html[data-rd-theme="dark"][data-rd-page="formulation"] .badge--draft { background: var(--rd-warning-bg); color: var(--rd-warning-text); }
  html[data-rd-theme="dark"][data-rd-page="formulation"] .badge--active { background: var(--rd-success-bg); color: var(--rd-success-text); }
  html[data-rd-theme="dark"][data-rd-page="formulation"] .badge--archived { background: var(--rd-raised); color: var(--rd-muted); }
  html[data-rd-theme="dark"][data-rd-page="formulation"] .badge--default { background: var(--rd-info-bg); color: var(--rd-info-text); }

  html[data-rd-theme="dark"] :is(.admin-note-button, .admin-note-modal__dialog, .latest-version-copy, .manual-link-open, .manual-link-result, .linked-product-chooser__item) { background: var(--rd-surface); color: var(--rd-text); border-color: var(--rd-border); }
  html[data-rd-theme="dark"] :is(.admin-note-button, .manual-link-open, .linked-product-chooser__item, .latest-version-copy):hover { background: var(--rd-raised); color: var(--rd-text); border-color: var(--rd-focus); }
  html[data-rd-theme="dark"] :is(.admin-note-button__text, .manual-link-result__name, .linked-latest-section__title) { color: var(--rd-text); }
  html[data-rd-theme="dark"] :is(.admin-note-button__empty, .manual-link-empty, .manual-link-result__meta, .linked-product-chooser__meta, .manual-link-status, .linked-latest-procedure__label) { color: var(--rd-muted); }
  html[data-rd-theme="dark"] :is(.admin-note-button__label, .linked-product-chooser__open) { color: var(--rd-link); }
  html[data-rd-theme="dark"] .admin-note-modal :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select) { background: var(--rd-surface); color: var(--rd-text); border-color: var(--rd-border); }
  html[data-rd-theme="dark"] .admin-note-modal :is(input, textarea, select):disabled { background: var(--rd-raised); color: var(--rd-muted); }
  html[data-rd-theme="dark"] :is(.admin-note-button, .latest-version-copy, .manual-link-open, .linked-product-chooser__item, .admin-note-modal input, .admin-note-modal textarea, .admin-note-modal select):focus-visible { outline: 2px solid var(--rd-focus); outline-offset: 2px; }
  html[data-rd-theme="dark"] .latest-version-copy.is-copied { background: var(--rd-success-bg); color: var(--rd-success-text); border-color: var(--rd-success-text); }
  html[data-rd-theme="dark"] .manual-link-chip { background: var(--rd-info-bg); color: var(--rd-info-text); border-color: var(--rd-focus); }
  html[data-rd-theme="dark"] .manual-link-chip__remove { color: var(--rd-info-text); }
  html[data-rd-theme="dark"] .manual-link-chip__remove:hover, html[data-rd-theme="dark"] .manual-link-status.is-error { color: var(--rd-danger-text); }
  html[data-rd-theme="dark"] .manual-link-result__action[disabled] { background: var(--rd-raised); color: var(--rd-muted); border-color: var(--rd-border); }
  html[data-rd-theme="dark"] :is(.manual-link-results__empty, .linked-latest-empty) { background: var(--rd-canvas); color: var(--rd-muted); border-color: var(--rd-border); }
  html[data-rd-theme="dark"] .linked-latest-table-wrap { border-color: var(--rd-border); }
  html[data-rd-theme="dark"] .linked-latest-table th { background: var(--rd-raised); color: var(--rd-text); border-color: var(--rd-border); }
  html[data-rd-theme="dark"] .linked-latest-table td { color: var(--rd-text); border-color: var(--rd-border); }
  html[data-rd-theme="dark"] .linked-latest-table tr.linked-latest-row--changed td { background: var(--rd-warning-bg); border-color: var(--rd-border); }
  html[data-rd-theme="dark"] .linked-latest-table tr.linked-latest-row--added td { background: var(--rd-success-bg); }
  html[data-rd-theme="dark"] .linked-latest-table tr.linked-latest-row--removed td { background: var(--rd-danger-bg); }
  html[data-rd-theme="dark"] .linked-latest-table .linked-latest-delta--increase { color: var(--rd-success-text); }
  html[data-rd-theme="dark"] .linked-latest-table .linked-latest-delta--decrease { color: var(--rd-danger-text); }
  html[data-rd-theme="dark"] .linked-latest-table .linked-latest-delta--neutral { color: var(--rd-warning-text); }
  html[data-rd-theme="dark"] .linked-latest-delta-sign { background: var(--rd-warning-bg); color: var(--rd-warning-text); }
  html[data-rd-theme="dark"] .linked-latest-delta--increase .linked-latest-delta-sign { background: var(--rd-success-bg); color: var(--rd-success-text); }
  html[data-rd-theme="dark"] .linked-latest-delta--decrease .linked-latest-delta-sign { background: var(--rd-danger-bg); color: var(--rd-danger-text); }
}