/*
 * Rhyddid Template 0.17.0
 * Site-wide interaction-state presentation for Joomla core and Rhyddid
 * components. This layer changes presentation only. Components continue to own
 * semantics, focus management, state changes, validation, persistence,
 * authorization, network behavior, and truthful announcements.
 */

:root {
  --rhyddid-interaction-ring: 0 0 0 0.22rem color-mix(in srgb, var(--accent) 28%, transparent);
  --rhyddid-interaction-hover: color-mix(in srgb, var(--accent) 8%, var(--surface));
  --rhyddid-interaction-selected: color-mix(in srgb, var(--accent) 14%, var(--surface));
  --rhyddid-interaction-active: color-mix(in srgb, var(--accent) 20%, var(--surface));
  --rhyddid-interaction-muted: color-mix(in srgb, var(--surface-soft) 84%, transparent);
  --success: var(--state-success);
  --warning: var(--state-warning);
  --danger: var(--state-danger);
  --info: var(--state-info);
  --surface-muted: var(--surface-soft);
}

/* --------------------------------------------------------------------------
   Universal keyboard, hover, active, and disabled feedback
   -------------------------------------------------------------------------- */

:where(
  a,
  button,
  input,
  select,
  textarea,
  summary,
  [role="button"],
  [role="tab"],
  [role="option"],
  [role="menuitem"],
  [role="checkbox"],
  [role="radio"],
  [role="switch"],
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  box-shadow: var(--rhyddid-interaction-ring);
}

:where(
  .btn,
  button,
  [role="button"],
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .interaction-control,
  .icon-button
) {
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    box-shadow 140ms ease,
    transform 100ms ease;
}

@media (hover: hover) {
  :where(
    .btn,
    button,
    [role="button"],
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    .interaction-control,
    .icon-button
  ):not(:disabled, [disabled], [aria-disabled="true"], .disabled):hover {
    border-color: var(--accent);
    box-shadow: 0 0.35rem 0.9rem color-mix(in srgb, var(--shadow) 78%, transparent);
  }
}

:where(
  .btn,
  button,
  [role="button"],
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .interaction-control,
  .icon-button
):not(:disabled, [disabled], [aria-disabled="true"], .disabled):active {
  transform: translateY(1px);
  box-shadow: none;
}

:where(
  button,
  input,
  select,
  textarea,
  .btn,
  [role="button"],
  [role="menuitem"],
  [role="tab"],
  [role="option"],
  [role="checkbox"],
  [role="radio"],
  [role="switch"]
):is(:disabled, [disabled], [aria-disabled="true"], .disabled) {
  cursor: not-allowed;
  opacity: 0.58;
  filter: saturate(0.45);
  box-shadow: none !important;
  transform: none !important;
}

[inert],
[aria-hidden="true"][data-interactive-region] {
  pointer-events: none;
  user-select: none;
}

[aria-busy="true"] {
  cursor: progress;
}

[aria-busy="true"] :where(button, .btn, [role="button"]):not([data-allow-while-busy]) {
  cursor: progress;
}

/* --------------------------------------------------------------------------
   Current, selected, checked, pressed, and expanded states
   -------------------------------------------------------------------------- */

:where(
  [aria-current="page"],
  [aria-current="step"],
  [aria-selected="true"],
  [aria-checked="true"],
  [aria-pressed="true"],
  .is-current,
  .is-selected,
  .is-checked,
  .is-active
) {
  border-color: color-mix(in srgb, var(--accent) 72%, var(--border));
}

:where(
  [role="tab"][aria-selected="true"],
  [role="option"][aria-selected="true"],
  [role="menuitemcheckbox"][aria-checked="true"],
  [role="menuitemradio"][aria-checked="true"],
  .choice-card.is-selected,
  .choice-card[aria-checked="true"],
  .selection-card.is-selected,
  .selection-card[aria-selected="true"]
) {
  color: var(--text-strong);
  background: var(--rhyddid-interaction-selected);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 58%, transparent);
}

:where(
  [aria-pressed="true"],
  .btn.active,
  .button-active,
  .toggle-active
) {
  color: var(--text-strong);
  background: var(--rhyddid-interaction-active);
  box-shadow: inset 0 0.18rem 0.4rem color-mix(in srgb, var(--shadow) 65%, transparent);
}

:where(
  [aria-expanded="true"],
  details[open] > summary,
  .disclosure.is-open,
  .accordion-button:not(.collapsed)
) {
  color: var(--text-strong);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}

:where(.accordion-button, .disclosure-toggle, [data-disclosure-toggle])[aria-expanded="true"] {
  background: color-mix(in srgb, var(--accent) 9%, var(--surface-raised));
}

/* --------------------------------------------------------------------------
   Interactive cards, rows, records, and action reveal
   -------------------------------------------------------------------------- */

:where(
  .is-interactive,
  [data-interactive="true"],
  .clickable-card,
  .interactive-card,
  .interactive-row,
  .record-row[data-href],
  .item-row[data-href]
) {
  position: relative;
  cursor: pointer;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    transform 120ms ease;
}

@media (hover: hover) {
  :where(
    .is-interactive,
    [data-interactive="true"],
    .clickable-card,
    .interactive-card,
    .interactive-row,
    .record-row[data-href],
    .item-row[data-href]
  ):not([aria-disabled="true"], .disabled):hover {
    background: var(--rhyddid-interaction-hover);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    box-shadow: var(--shadow-soft);
  }
}

:where(
  .is-interactive,
  [data-interactive="true"],
  .clickable-card,
  .interactive-card,
  .interactive-row,
  .record-row[data-href],
  .item-row[data-href]
):focus-within {
  border-color: var(--accent);
  box-shadow: var(--rhyddid-interaction-ring);
}

.interaction-actions,
.row-actions,
.card-actions,
.hover-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rhyddid-gap-sm, 0.65rem);
}

@media (hover: hover) and (pointer: fine) {
  :where(.interactive-card, .interactive-row, .record-row, .item-row) > :where(.hover-actions, .interaction-actions[data-reveal="hover"]) {
    opacity: 0.46;
    transition: opacity 140ms ease;
  }

  :where(.interactive-card, .interactive-row, .record-row, .item-row):is(:hover, :focus-within) > :where(.hover-actions, .interaction-actions[data-reveal="hover"]) {
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   Editing, dirty, autosave, saved, and validation interaction states
   -------------------------------------------------------------------------- */

:where(
  .inline-editor,
  .editable-region,
  [data-editable-region],
  .form-region
).is-editing,
:where(.inline-editor, .editable-region, [data-editable-region], .form-region)[data-state="editing"] {
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: var(--rhyddid-interaction-ring);
}

:where(.is-dirty, [data-state="dirty"], [data-unsaved="true"]) {
  border-inline-start: 0.25rem solid var(--warning);
}

:where(.autosave-status, .save-status, .draft-status, [data-save-status]) {
  display: inline-flex;
  min-inline-size: 0;
  align-items: center;
  gap: 0.45rem;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.35;
}

:where(.autosave-status, .save-status, [data-save-status])[data-state="saving"],
:where(.autosave-status, .save-status).is-saving {
  color: var(--info);
}

:where(.autosave-status, .save-status, [data-save-status])[data-state="saved"],
:where(.autosave-status, .save-status).is-saved {
  color: var(--success);
}

:where(.autosave-status, .save-status, [data-save-status])[data-state="failed"],
:where(.autosave-status, .save-status).is-failed {
  color: var(--danger);
}

:where(.form-control, .form-select, input, textarea, select)[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--danger) 20%, transparent);
}

:where(.form-control, .form-select, input, textarea, select)[aria-invalid="false"]:not(:placeholder-shown) {
  border-color: color-mix(in srgb, var(--success) 70%, var(--border));
}

:where(.field-error, .invalid-feedback, [role="alert"].field-message) {
  color: var(--danger);
}

:where(.field-warning, .warning-feedback) {
  color: var(--warning);
}

:where(.field-success, .valid-feedback) {
  color: var(--success);
}

/* --------------------------------------------------------------------------
   Loading, submitting, optimistic, and pending action feedback
   -------------------------------------------------------------------------- */

:where(
  .is-loading,
  .is-submitting,
  .is-processing,
  .is-saving,
  [data-state="loading"],
  [data-state="submitting"],
  [data-state="processing"],
  [data-state="saving"]
) {
  cursor: progress;
}

:where(
  .btn,
  button,
  [role="button"]
):is(.is-loading, .is-submitting, [aria-busy="true"], [data-state="loading"], [data-state="submitting"]) {
  position: relative;
  isolation: isolate;
}

:where(
  .btn,
  button,
  [role="button"]
):is(.is-loading, .is-submitting, [aria-busy="true"], [data-state="loading"], [data-state="submitting"])::after {
  content: "";
  inline-size: 0.9em;
  block-size: 0.9em;
  flex: 0 0 auto;
  margin-inline-start: 0.5em;
  border: 0.14em solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: rhyddid-interaction-spin 700ms linear infinite;
}

:where(.optimistic-update, [data-state="optimistic"], .pending-change) {
  opacity: 0.78;
  background: color-mix(in srgb, var(--info) 6%, var(--surface));
}

:where(.reverted-change, [data-state="reverted"]) {
  background: color-mix(in srgb, var(--warning) 9%, var(--surface));
}

@keyframes rhyddid-interaction-spin {
  to { transform: rotate(1turn); }
}

/* --------------------------------------------------------------------------
   Menus, listboxes, command palettes, and option collections
   -------------------------------------------------------------------------- */

:where(.dropdown-menu, [role="menu"], [role="listbox"], .command-menu, .suggestions-list) {
  max-inline-size: min(32rem, calc(100vw - 2rem));
  max-block-size: min(26rem, calc(100vh - 4rem));
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

:where(.dropdown-item, [role="menuitem"], [role="option"], .command-item, .suggestion-item) {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

@media (hover: hover) {
  :where(.dropdown-item, [role="menuitem"], [role="option"], .command-item, .suggestion-item):not([aria-disabled="true"], .disabled):hover {
    color: var(--text-strong);
    background: var(--rhyddid-interaction-hover);
  }
}

:where(.dropdown-item, [role="menuitem"], [role="option"], .command-item, .suggestion-item):focus-visible {
  position: relative;
  z-index: 1;
  color: var(--text-strong);
  background: var(--rhyddid-interaction-selected);
}

:where([role="option"][aria-selected="true"], .dropdown-item.active, .command-item.is-active, .suggestion-item.is-active) {
  color: var(--text-strong);
  background: var(--rhyddid-interaction-active);
}

/* --------------------------------------------------------------------------
   Drag, drop, reorder, upload, and sortable interaction states
   -------------------------------------------------------------------------- */

:where(.drag-handle, [data-drag-handle]) {
  display: inline-flex;
  min-inline-size: 2.5rem;
  min-block-size: 2.5rem;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;
}

:where(.drag-handle, [data-drag-handle]):active,
:where(.is-dragging, [aria-grabbed="true"]) :where(.drag-handle, [data-drag-handle]) {
  cursor: grabbing;
}

:where(.is-dragging, [data-state="dragging"], .sortable-drag) {
  opacity: 0.72;
  box-shadow: var(--shadow-soft);
}

:where(.sortable-ghost, .drag-placeholder, [data-state="placeholder"]) {
  min-block-size: 3rem;
  border: 2px dashed var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

:where(.dropzone, [data-dropzone], .upload-dropzone) {
  display: grid;
  min-block-size: 7rem;
  place-items: center;
  padding: var(--rhyddid-space-lg, 1.5rem);
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
  text-align: center;
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

:where(.dropzone, [data-dropzone], .upload-dropzone):focus-within {
  border-color: var(--accent);
  box-shadow: var(--rhyddid-interaction-ring);
}

:where(.dropzone, [data-dropzone], .upload-dropzone):is(.is-dragover, [data-state="dragover"], [aria-dropeffect="copy"]) {
  border-color: var(--accent);
  background: var(--rhyddid-interaction-selected);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent);
}

:where(.dropzone, [data-dropzone], .upload-dropzone):is(.is-rejected, [data-state="rejected"]) {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
}

/* --------------------------------------------------------------------------
   Copy, reveal, inline detail, and transient confirmation states
   -------------------------------------------------------------------------- */

:where(.copy-control, .reveal-control, .inline-action, .utility-action) {
  display: inline-flex;
  min-inline-size: 2.5rem;
  min-block-size: 2.5rem;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

:where(.copy-control, [data-copy-control]).is-copied,
:where(.copy-control, [data-copy-control])[data-state="copied"] {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 70%, var(--border));
  background: color-mix(in srgb, var(--success) 9%, var(--surface));
}

:where(.transient-status, .interaction-feedback, [role="status"].interaction-status) {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-inline-size: 0;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

:where(.expandable-detail, .inline-detail, [data-collapsible-detail]) {
  min-inline-size: 0;
}

:where(.expandable-detail, .inline-detail, [data-collapsible-detail])[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Session timeout, locked editing, and ownership interaction states
   -------------------------------------------------------------------------- */

:where(.editing-lock, .record-lock, .session-lock, [data-lock-state]) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--rhyddid-gap-sm, 0.65rem);
  padding: var(--rhyddid-space-md, 1rem);
  border: 1px solid var(--border-strong);
  border-inline-start: 0.3rem solid var(--warning);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--warning) 7%, var(--surface));
}

:where(.editing-lock, .record-lock, .session-lock, [data-lock-state])[data-state="owned"] {
  border-inline-start-color: var(--success);
  background: color-mix(in srgb, var(--success) 6%, var(--surface));
}

:where(.editing-lock, .record-lock, .session-lock, [data-lock-state])[data-state="denied"] {
  border-inline-start-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 7%, var(--surface));
}

:where(.session-timeout, .session-expiry, [data-session-warning]) {
  border-color: color-mix(in srgb, var(--warning) 65%, var(--border));
}

/* --------------------------------------------------------------------------
   Responsive, touch, reduced-motion, high-contrast, and print behavior
   -------------------------------------------------------------------------- */

@media (pointer: coarse) {
  :where(.interaction-actions, .row-actions, .card-actions, .hover-actions) {
    opacity: 1 !important;
  }

  :where(.drag-handle, [data-drag-handle], .icon-button, .copy-control, .reveal-control) {
    min-inline-size: 2.75rem;
    min-block-size: 2.75rem;
  }
}

@media (max-width: 48rem) {
  :where(.interaction-actions, .row-actions, .card-actions, .hover-actions, .editing-lock, .record-lock, .session-lock) {
    align-items: stretch;
  }

  :where(.interaction-actions, .row-actions, .card-actions, .hover-actions) > :where(.btn, button, [role="button"]) {
    max-inline-size: 100%;
  }

  :where(.dropzone, [data-dropzone], .upload-dropzone) {
    min-block-size: 5.5rem;
    padding: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(
    .btn,
    button,
    [role="button"],
    .interaction-control,
    .icon-button,
    .is-interactive,
    [data-interactive="true"],
    .clickable-card,
    .interactive-card,
    .interactive-row,
    .record-row,
    .item-row,
    .dropzone,
    [data-dropzone]
  ) {
    transition: none !important;
  }

  :where(
    .btn,
    button,
    [role="button"]
  ):is(.is-loading, .is-submitting, [aria-busy="true"], [data-state="loading"], [data-state="submitting"])::after {
    animation-duration: 1.8s;
  }
}

@media (forced-colors: active) {
  :where(
    [aria-current="page"],
    [aria-current="step"],
    [aria-selected="true"],
    [aria-checked="true"],
    [aria-pressed="true"],
    .is-current,
    .is-selected,
    .is-active,
    .dropzone,
    [data-dropzone],
    .sortable-ghost,
    .drag-placeholder
  ) {
    border: 2px solid Highlight;
    box-shadow: none !important;
  }

  :where(:disabled, [disabled], [aria-disabled="true"], .disabled) {
    color: GrayText;
    border-color: GrayText;
  }
}

@media print {
  :where(
    .hover-actions,
    .interaction-actions[data-print="hide"],
    .drag-handle,
    [data-drag-handle],
    .dropzone,
    [data-dropzone],
    .copy-control,
    .reveal-control,
    .inline-action,
    .utility-action,
    .autosave-status,
    .save-status,
    .transient-status,
    .interaction-feedback
  ) {
    display: none !important;
  }

  :where(.is-dirty, [data-state="dirty"], [data-unsaved="true"]) {
    border-inline-start-color: #000 !important;
  }
}