/*
 * Rhyddid Joomla/Bootstrap compatibility layer.
 * Loaded after component styles so Joomla core and third-party Bootstrap markup
 * remains structurally complete and follows the active Rhyddid color scheme.
 */

html[data-color-scheme="dark"],
html[data-bs-theme="dark"],
body[data-color-scheme="dark"],
body[data-bs-theme="dark"] {
  --bs-blue: #6f9fbe;
  --bs-indigo: #8d79bd;
  --bs-purple: #9a74aa;
  --bs-pink: #c66f8e;
  --bs-red: #d65b60;
  --bs-orange: #cf8650;
  --bs-yellow: #d3a552;
  --bs-green: #75aa70;
  --bs-teal: #6fa99c;
  --bs-cyan: #6f9fbe;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-gray: #aaa29d;
  --bs-gray-dark: #211e1d;
  --bs-primary: #af3032;
  --bs-primary-rgb: 175, 48, 50;
  --bs-secondary: #695e5b;
  --bs-secondary-rgb: 105, 94, 91;
  --bs-success: #668f60;
  --bs-success-rgb: 102, 143, 96;
  --bs-info: #4d7897;
  --bs-info-rgb: 77, 120, 151;
  --bs-warning: #b18431;
  --bs-warning-rgb: 177, 132, 49;
  --bs-danger: #b52e32;
  --bs-danger-rgb: 181, 46, 50;
  --bs-light: #e4dfda;
  --bs-light-rgb: 228, 223, 218;
  --bs-dark: #111111;
  --bs-dark-rgb: 17, 17, 17;
  --bs-body-color: var(--text);
  --bs-body-color-rgb: 228, 223, 218;
  --bs-body-bg: var(--page-bg);
  --bs-body-bg-rgb: 7, 7, 7;
  --bs-emphasis-color: var(--text-strong);
  --bs-emphasis-color-rgb: 255, 250, 245;
  --bs-secondary-color: var(--text-muted);
  --bs-secondary-color-rgb: 170, 162, 157;
  --bs-secondary-bg: var(--surface-soft);
  --bs-secondary-bg-rgb: 33, 30, 29;
  --bs-tertiary-color: var(--text-muted);
  --bs-tertiary-bg: var(--surface-raised);
  --bs-tertiary-bg-rgb: 26, 24, 23;
  --bs-heading-color: var(--text-strong);
  --bs-link-color: var(--accent-strong);
  --bs-link-color-rgb: 209, 72, 75;
  --bs-link-hover-color: var(--accent);
  --bs-link-hover-color-rgb: 175, 48, 50;
  --bs-code-color: #e7a7a9;
  --bs-highlight-color: var(--text-strong);
  --bs-highlight-bg: var(--mark-bg);
  --bs-border-color: var(--border);
  --bs-border-color-translucent: rgba(170, 162, 157, 0.22);
  --bs-form-valid-color: #75aa70;
  --bs-form-valid-border-color: #668f60;
  --bs-form-invalid-color: #d95b60;
  --bs-form-invalid-border-color: #c63f44;
}

html[data-color-scheme="light"],
html[data-bs-theme="light"],
body[data-color-scheme="light"],
body[data-bs-theme="light"] {
  --bs-primary: #941f24;
  --bs-primary-rgb: 148, 31, 36;
  --bs-secondary: #695e5b;
  --bs-secondary-rgb: 105, 94, 91;
  --bs-success: #3f713c;
  --bs-success-rgb: 63, 113, 60;
  --bs-info: #356b8f;
  --bs-info-rgb: 53, 107, 143;
  --bs-warning: #8a6518;
  --bs-warning-rgb: 138, 101, 24;
  --bs-danger: #a52b31;
  --bs-danger-rgb: 165, 43, 49;
  --bs-light: #f8f5f0;
  --bs-light-rgb: 248, 245, 240;
  --bs-dark: #211d1b;
  --bs-dark-rgb: 33, 29, 27;
  --bs-body-color: var(--text);
  --bs-body-color-rgb: 33, 29, 27;
  --bs-body-bg: var(--page-bg);
  --bs-body-bg-rgb: 233, 229, 223;
  --bs-emphasis-color: var(--text-strong);
  --bs-emphasis-color-rgb: 16, 14, 13;
  --bs-secondary-color: var(--text-muted);
  --bs-secondary-color-rgb: 98, 90, 86;
  --bs-secondary-bg: var(--surface-soft);
  --bs-secondary-bg-rgb: 238, 232, 225;
  --bs-tertiary-color: var(--text-muted);
  --bs-tertiary-bg: var(--surface-raised);
  --bs-tertiary-bg-rgb: 255, 255, 255;
  --bs-heading-color: var(--text-strong);
  --bs-link-color: var(--accent);
  --bs-link-color-rgb: 148, 31, 36;
  --bs-link-hover-color: var(--accent-strong);
  --bs-link-hover-color-rgb: 116, 20, 24;
  --bs-code-color: #8f2227;
  --bs-highlight-color: var(--text-strong);
  --bs-highlight-bg: var(--mark-bg);
  --bs-border-color: var(--border);
  --bs-border-color-translucent: rgba(98, 90, 86, 0.25);
  --bs-form-valid-color: #3f713c;
  --bs-form-valid-border-color: #3f713c;
  --bs-form-invalid-color: #a52b31;
  --bs-form-invalid-border-color: #a52b31;
}

/* Bootstrap component variables must follow the active Rhyddid scheme even
   when a component stylesheet was written against Cassiopeia. */
.card,
.list-group,
.dropdown-menu,
.modal-content,
.offcanvas,
.popover,
.toast,
.accordion,
.accordion-item,
.pagination,
.table,
.nav-tabs,
.nav-pills {
  color: var(--text);
}

.card {
  --bs-card-color: var(--text);
  --bs-card-bg: var(--surface-raised);
  --bs-card-border-color: var(--border);
  --bs-card-cap-color: var(--text-strong);
  --bs-card-cap-bg: var(--surface-soft);
  background-color: var(--surface-raised);
  border-color: var(--border);
}

.card-header,
.card-footer {
  color: var(--text-strong);
  background-color: var(--surface-soft);
  border-color: var(--border);
}

.card-body,
.card-title,
.card-subtitle,
.card-text {
  color: inherit;
}

.list-group {
  --bs-list-group-color: var(--text);
  --bs-list-group-bg: var(--surface-raised);
  --bs-list-group-border-color: var(--border);
  --bs-list-group-action-color: var(--text);
  --bs-list-group-action-hover-color: var(--text-strong);
  --bs-list-group-action-hover-bg: var(--surface-soft);
  --bs-list-group-active-color: var(--accent-contrast);
  --bs-list-group-active-bg: var(--accent-deep);
  --bs-list-group-active-border-color: var(--accent);
}

.list-group-item {
  color: var(--text);
  background-color: var(--surface-raised);
  border-color: var(--border);
}

.dropdown-menu {
  --bs-dropdown-color: var(--text);
  --bs-dropdown-bg: var(--surface-raised);
  --bs-dropdown-border-color: var(--border);
  --bs-dropdown-link-color: var(--text);
  --bs-dropdown-link-hover-color: var(--text-strong);
  --bs-dropdown-link-hover-bg: var(--surface-soft);
  --bs-dropdown-link-active-color: var(--accent-contrast);
  --bs-dropdown-link-active-bg: var(--accent-deep);
  --bs-dropdown-divider-bg: var(--border);
  --bs-dropdown-header-color: var(--text-muted);
}

.modal,
.offcanvas,
.popover,
.toast {
  --bs-modal-color: var(--text);
  --bs-modal-bg: var(--surface-raised);
  --bs-modal-border-color: var(--border);
  --bs-offcanvas-color: var(--text);
  --bs-offcanvas-bg: var(--surface-raised);
  --bs-popover-body-color: var(--text);
  --bs-popover-bg: var(--surface-raised);
  --bs-popover-border-color: var(--border);
  --bs-toast-color: var(--text);
  --bs-toast-bg: color-mix(in srgb, var(--surface-raised) 94%, transparent);
  --bs-toast-border-color: var(--border);
  color: var(--text);
}

.modal-content,
.offcanvas,
.popover,
.toast {
  background-color: var(--surface-raised);
  border-color: var(--border);
}

.modal-header,
.modal-footer,
.offcanvas-header,
.toast-header {
  color: var(--text-strong);
  background-color: var(--surface-soft);
  border-color: var(--border);
}

.table {
  --bs-table-color: var(--text);
  --bs-table-bg: var(--surface-raised);
  --bs-table-border-color: var(--border);
  --bs-table-striped-color: var(--text);
  --bs-table-striped-bg: color-mix(in srgb, var(--surface-soft) 70%, transparent);
  --bs-table-active-color: var(--text-strong);
  --bs-table-active-bg: color-mix(in srgb, var(--accent) 18%, var(--surface-raised));
  --bs-table-hover-color: var(--text-strong);
  --bs-table-hover-bg: color-mix(in srgb, var(--surface-soft) 84%, transparent);
}

.table > :not(caption) > * > * {
  color: inherit;
  background-color: var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-bg)));
  border-color: var(--border);
}

.pagination {
  --bs-pagination-color: var(--text);
  --bs-pagination-bg: var(--surface-raised);
  --bs-pagination-border-color: var(--border);
  --bs-pagination-hover-color: var(--text-strong);
  --bs-pagination-hover-bg: var(--surface-soft);
  --bs-pagination-hover-border-color: var(--accent);
  --bs-pagination-focus-color: var(--text-strong);
  --bs-pagination-focus-bg: var(--surface-soft);
  --bs-pagination-active-color: var(--accent-contrast);
  --bs-pagination-active-bg: var(--accent-deep);
  --bs-pagination-active-border-color: var(--accent);
  --bs-pagination-disabled-color: var(--text-muted);
  --bs-pagination-disabled-bg: var(--surface-soft);
  --bs-pagination-disabled-border-color: var(--border);
}

.nav-tabs {
  --bs-nav-tabs-border-color: var(--border);
  --bs-nav-tabs-link-hover-border-color: var(--border) var(--border) transparent;
  --bs-nav-tabs-link-active-color: var(--text-strong);
  --bs-nav-tabs-link-active-bg: var(--surface-raised);
  --bs-nav-tabs-link-active-border-color: var(--border) var(--border) var(--surface-raised);
}

.nav-link {
  color: var(--accent-strong);
}

.nav-link:hover,
.nav-link:focus {
  color: var(--accent);
}

/* Standard Joomla frontend editing and core form layouts. */
.com-content-form,
.com-content-form form,
.com-content-form .edit,
.com-content-form .tab-content,
.com-content-form .tab-pane,
.com-content-form joomla-tab,
.com-content-form joomla-tab-element,
joomla-tab-element,
joomla-tab-element[active] {
  color: var(--text);
  background: var(--surface-raised);
}

.com-content-form,
.com-content-form form,
.com-content-form .edit {
  min-width: 0;
  max-width: 100%;
}

.com-content-form .tab-content,
.com-content-form .tab-pane,
.com-content-form joomla-tab-element,
joomla-tab-element {
  border-color: var(--border);
}

.com-content-form :where(.control-group, .form-group, .mb-3),
joomla-tab-element :where(.control-group, .form-group, .mb-3) {
  color: var(--text);
}

.com-content-form :where(label, legend, .control-label, .form-label),
joomla-tab-element :where(label, legend, .control-label, .form-label) {
  color: var(--text-strong) !important;
}

.com-content-form :where(.form-text, .form-hint, .form-help, .field-help, .help-block, small, .text-muted),
joomla-tab-element :where(.form-text, .form-hint, .form-help, .field-help, .help-block, small, .text-muted) {
  color: var(--text-muted) !important;
}

.com-content-form :where(input, select, textarea, .form-control, .form-select),
joomla-tab-element :where(input, select, textarea, .form-control, .form-select) {
  color: var(--text) !important;
  background-color: var(--input-bg) !important;
  border-color: var(--border-strong) !important;
}

.com-content-form :where(input, textarea)::placeholder,
joomla-tab-element :where(input, textarea)::placeholder {
  color: var(--text-muted);
  opacity: 0.8;
}

.com-content-form fieldset,
joomla-tab-element fieldset {
  color: var(--text);
  background: transparent;
  border-color: var(--border);
}

.com-content-form .btn-toolbar,
.com-content-form .form-actions,
.com-content-form .control-group,
joomla-tab-element .control-group {
  min-width: 0;
}

/* Joomla custom fields and enhanced controls. */
joomla-tab,
joomla-tab-element,
joomla-field-fancy-select,
joomla-field-media,
joomla-field-permissions,
joomla-field-subform,
joomla-field-simple-color,
joomla-field-fancy-select .choices,
.choices,
.choices__inner,
.choices__list--dropdown,
.choices__list[aria-expanded],
.awesomplete > ul {
  color: var(--text);
}

.choices {
  --choices-bg-color: var(--input-bg);
  --choices-keyline-color: var(--border-strong);
  --choices-primary-color: var(--accent);
}

.choices__inner,
.choices__input,
.choices__list--dropdown,
.choices__list[aria-expanded],
.choices__item--choice,
.awesomplete > ul {
  color: var(--text) !important;
  background: var(--input-bg) !important;
  border-color: var(--border-strong) !important;
}

.choices__item--choice.is-highlighted,
.awesomplete > ul > li:hover,
.awesomplete > ul > li[aria-selected="true"] {
  color: var(--text-strong) !important;
  background: var(--surface-soft) !important;
}

/* Calendar and icon-bearing controls require visible icon color. */
.icon-calendar,
.icon-eye,
.icon-eye-slash,
.icon-edit,
.icon-pencil,
.icon-trash,
.icon-delete,
.icon-save,
.icon-cancel,
[class^="icon-"],
[class*=" icon-"] {
  color: currentColor;
}

.field-calendar .btn,
.input-group .btn,
.input-group-text {
  color: var(--text-strong);
  background-color: var(--surface-soft);
  border-color: var(--border-strong);
}

/* Component cards or panels that use a light surface without explicitly
   setting readable text should inherit the active scheme. The suffix selectors
   cover common extension naming such as `location-card` and `record-panel`
   without requiring a template patch for every component name. */
:where(
  .card,
  .panel,
  .well,
  .item-card,
  .record-card,
  .result-card,
  .dashboard-card,
  .summary-card,
  .location-card,
  .shopping-card,
  [class$="-card"],
  [class*="-card "],
  [class$="__card"],
  [class*="__card "],
  [class$="-panel"],
  [class*="-panel "],
  [class$="__panel"],
  [class*="__panel "]
) {
  color: var(--text);
  background-color: var(--surface-raised);
  border-color: var(--border);
}

:where(
  .card,
  .panel,
  .well,
  .item-card,
  .record-card,
  .result-card,
  .dashboard-card,
  .summary-card,
  .location-card,
  .shopping-card,
  [class$="-card"],
  [class*="-card "],
  [class$="__card"],
  [class*="__card "],
  [class$="-panel"],
  [class*="-panel "],
  [class$="__panel"],
  [class*="__panel "]
) :where(p, li, dd, dt, span, small, strong, em, label) {
  color: inherit;
}

body[data-color-scheme="dark"] :where(.bg-white, .bg-light) {
  color: var(--text) !important;
  background-color: var(--surface-raised) !important;
}

body[data-color-scheme="dark"] .bg-light {
  background-color: var(--surface-soft) !important;
}

body[data-color-scheme="dark"] :where(.text-dark, .text-body) {
  color: var(--text-strong) !important;
}

/* Joomla's tab custom element is not a Bootstrap nav in every context. */
joomla-tab > [role="tablist"],
joomla-tab .joomla-tabs,
joomla-tab .joomla-tabs-nav {
  color: var(--text);
  background: var(--surface-soft);
  border-color: var(--border);
}

joomla-tab :where(button, a)[role="tab"] {
  color: var(--text);
  background: var(--surface-soft);
  border-color: var(--border);
}

joomla-tab :where(button, a)[role="tab"][aria-selected="true"],
joomla-tab :where(button, a)[role="tab"].active {
  color: var(--text-strong);
  background: var(--surface-raised);
  box-shadow: inset 0 -3px 0 var(--accent);
}

/* Skip links are visually hidden until the individual link itself receives
   keyboard focus. They must not remain pinned to the page after activation. */
.skip-links {
  position: fixed;
  inset-block-start: 0.75rem;
  inset-inline-start: 0.75rem;
  z-index: 10000;
  display: block;
  pointer-events: none;
}

.skip-link,
.skip-links .skip-link {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  transform: none !important;
  pointer-events: none;
}

.skip-link:focus,
.skip-link:focus-visible,
.skip-links .skip-link:focus,
.skip-links .skip-link:focus-visible {
  position: relative !important;
  inline-size: auto;
  block-size: auto;
  margin: 0 0 0.35rem;
  padding: 0.65rem 0.9rem;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  pointer-events: auto;
  color: var(--text-strong);
  background: var(--surface-raised);
  border: 2px solid var(--accent);
  box-shadow: 0 0.35rem 1rem var(--shadow);
}

.skip-links:focus-within .skip-link:not(:focus):not(:focus-visible) {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}

/* Make light/dark behavior explicit for embedded core editors where supported. */
html[data-color-scheme="dark"] iframe,
body[data-color-scheme="dark"] iframe {
  color-scheme: dark;
}

html[data-color-scheme="light"] iframe,
body[data-color-scheme="light"] iframe {
  color-scheme: light;
}

@media (max-width: 900px) {
  .com-content-form .form-horizontal .control-group,
  joomla-tab-element .form-horizontal .control-group {
    grid-template-columns: minmax(0, 1fr);
  }

  .com-content-form .form-horizontal .control-group > .control-label,
  joomla-tab-element .form-horizontal .control-group > .control-label {
    margin-block-start: 0;
    text-align: start;
  }
}

@media print {
  .skip-links,
  .skip-link {
    display: none !important;
  }
}