// ==========================================================================
// UTILITY COMPONENTS
// ==========================================================================
// Small, reusable utility components
// Theme-agnostic structures and behaviors
// ==========================================================================

// BADGES
.badge {
  display: inline-block;
  padding: var(--badge-padding, 4px 8px);
  font-size: var(--badge-font-size, 0.75rem);
  font-weight: var(--badge-font-weight, 500);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: var(--badge-border-radius, 4px);
  transition: all var(--badge-transition-duration, 0.2s);

  &.badge-pill {
    padding: var(--badge-pill-padding, 4px 12px);
    border-radius: var(--badge-pill-border-radius, 10em);
  }

  &.badge-dot {
    width: var(--badge-dot-size, 8px);
    height: var(--badge-dot-size, 8px);
    padding: 0;
    border-radius: 50%;
  }

  &.badge-lg {
    padding: var(--badge-lg-padding, 8px 12px);
    font-size: var(--badge-lg-font-size, 0.875rem);
  }

  &.badge-sm {
    padding: var(--badge-sm-padding, 2px 6px);
    font-size: var(--badge-sm-font-size, 0.625rem);
  }
}

// ALERTS
.alert {
  position: relative;
  padding: var(--alert-padding, 16px 20px);
  margin-bottom: var(--alert-margin-bottom, 16px);
  border: var(--alert-border, 1px solid transparent);
  border-radius: var(--alert-border-radius, 6px);

  .alert-title {
    margin: 0 0 var(--alert-title-margin, 8px) 0;
    font-size: var(--alert-title-size, 1rem);
    font-weight: var(--alert-title-weight, 600);
  }

  .alert-content {
    margin: 0;

    p:last-child {
      margin-bottom: 0;
    }
  }

  .alert-actions {
    margin-top: var(--alert-actions-margin, 12px);
    display: flex;
    gap: var(--alert-actions-gap, 8px);
  }

  .alert-close {
    position: absolute;
    top: var(--alert-close-top, 12px);
    right: var(--alert-close-right, 12px);
    padding: var(--alert-close-padding, 4px);
    background: transparent;
    border: none;
    cursor: pointer;
    opacity: var(--alert-close-opacity, 0.7);
    transition: opacity var(--alert-close-transition-duration, 0.2s);
    width: var(--alert-close-size, 24px);
    height: var(--alert-close-size, 24px);
    display: flex;
    align-items: center;
    justify-content: center;

    &:hover {
      opacity: 1;
    }

    &:focus {
      outline: var(--alert-close-focus-outline, 2px solid transparent);
      outline-offset: var(--alert-close-focus-outline-offset, 2px);
    }
  }

  &.alert-dismissible {
    padding-right: var(--alert-dismissible-padding-right, 48px);
  }
}

// TOOLTIPS (Structure only - positioning handled by JS)
.tooltip {
  position: absolute;
  z-index: var(--z-tooltip, 1070);
  display: block;
  margin: var(--tooltip-margin, 0);
  font-size: var(--tooltip-font-size, 0.875rem);
  line-height: var(--tooltip-line-height, 1.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--tooltip-transition-duration, 0.2s);

  &.tooltip-show {
    opacity: 1;
  }

  .tooltip-arrow {
    position: absolute;
    display: block;
    width: var(--tooltip-arrow-size, 8px);
    height: var(--tooltip-arrow-size, 8px);
  }

  .tooltip-inner {
    max-width: var(--tooltip-max-width, 200px);
    padding: var(--tooltip-padding, 8px 12px);
    text-align: center;
    border-radius: var(--tooltip-border-radius, 4px);
  }
}

// POPOVER (Structure only - positioning handled by JS)
.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--z-popover, 1060);
  display: block;
  max-width: var(--popover-max-width, 276px);
  font-size: var(--popover-font-size, 0.875rem);
  line-height: var(--popover-line-height, 1.6);
  word-wrap: break-word;
  border: var(--popover-border, 1px solid rgba(0, 0, 0, 0.2));
  border-radius: var(--popover-border-radius, 6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--popover-transition-duration, 0.2s);

  &.popover-show {
    opacity: 1;
    pointer-events: auto;
  }

  .popover-arrow {
    position: absolute;
    display: block;
    width: var(--popover-arrow-size, 12px);
    height: var(--popover-arrow-size, 12px);
  }

  .popover-header {
    padding: var(--popover-header-padding, 12px 16px);
    margin: 0;
    font-size: var(--popover-header-font-size, 1rem);
    font-weight: var(--popover-header-font-weight, 600);
    border-bottom: var(--popover-header-border, 1px solid rgba(0, 0, 0, 0.1));
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;

    &:empty {
      display: none;
    }
  }

  .popover-body {
    padding: var(--popover-body-padding, 16px);
  }
}

// DROPDOWN
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-toggle {
  &::after {
    display: inline-block;
    margin-left: var(--dropdown-caret-spacing, 8px);
    vertical-align: middle;
    content: '';
    border-top: var(--dropdown-caret-size, 4px) solid;
    border-right: var(--dropdown-caret-size, 4px) solid transparent;
    border-bottom: 0;
    border-left: var(--dropdown-caret-size, 4px) solid transparent;
    transition: transform var(--dropdown-caret-transition-duration, 0.2s);
  }

  &[aria-expanded="true"]::after {
    transform: rotate(180deg);
  }

  &.dropdown-toggle-no-caret::after {
    display: none;
  }
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--z-dropdown, 1000);
  display: none;
  float: left;
  min-width: var(--dropdown-min-width, 160px);
  padding: var(--dropdown-padding, 8px 0);
  margin: var(--dropdown-margin, 2px 0 0);
  font-size: var(--dropdown-font-size, 1rem);
  text-align: left;
  list-style: none;
  border: var(--dropdown-border, 1px solid rgba(0, 0, 0, 0.15));
  border-radius: var(--dropdown-border-radius, 6px);
  box-shadow: var(--dropdown-box-shadow, 0 6px 12px rgba(0, 0, 0, 0.175));
  background-clip: padding-box;

  &.dropdown-menu-end {
    right: 0;
    left: auto;
  }

  &.dropdown-menu-show {
    display: block;
  }
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: var(--dropdown-item-padding, 6px 20px);
  clear: both;
  font-weight: normal;
  line-height: var(--dropdown-item-line-height, 1.5);
  text-align: inherit;
  text-decoration: none;
  white-space: nowrap;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: all var(--dropdown-item-transition-duration, 0.2s);

  &:focus {
    outline: var(--dropdown-item-focus-outline, 2px solid transparent);
    outline-offset: var(--dropdown-item-focus-outline-offset, -2px);
  }

  &.dropdown-item-active {
    // Active styling handled by themes
  }

  &.dropdown-item-disabled {
    pointer-events: none;
    opacity: var(--dropdown-item-disabled-opacity, 0.5);
  }
}

.dropdown-divider {
  height: 0;
  margin: var(--dropdown-divider-margin, 4px 0);
  overflow: hidden;
  border-top: 1px solid var(--dropdown-divider-color, rgba(0, 0, 0, 0.15));
}

.dropdown-header {
  display: block;
  padding: var(--dropdown-header-padding, 4px 20px);
  margin-bottom: 0;
  font-size: var(--dropdown-header-font-size, 0.875rem);
  font-weight: var(--dropdown-header-font-weight, 600);
  line-height: var(--dropdown-header-line-height, 1.5);
  white-space: nowrap;
  opacity: var(--dropdown-header-opacity, 0.6);
}

// MODAL (Structure only - overlay/backdrop handled separately)
.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-modal, 1050);
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--modal-transition-duration, 0.3s) var(--modal-transition-easing, ease);

  &.modal-show {
    opacity: 1;
    pointer-events: auto;
  }
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: var(--modal-margin, 16px);
  pointer-events: none;
  transform: translateY(-50px);
  transition: transform var(--modal-transition-duration, 0.3s) var(--modal-transition-easing, ease);

  .modal-show & {
    transform: translateY(0);
  }

  @media (min-width: 576px) {
    max-width: var(--modal-sm-max-width, 500px);
    margin: var(--modal-margin-sm, 32px auto);
  }

  &.modal-sm {
    @media (min-width: 576px) {
      max-width: var(--modal-sm-width, 300px);
    }
  }

  &.modal-lg {
    @media (min-width: 992px) {
      max-width: var(--modal-lg-width, 800px);
    }
  }

  &.modal-xl {
    @media (min-width: 1200px) {
      max-width: var(--modal-xl-width, 1140px);
    }
  }

  &.modal-fullscreen {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;

    .modal-content {
      height: 100%;
      border: 0;
      border-radius: 0;
    }
  }
}

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-clip: padding-box;
  border: var(--modal-content-border, 1px solid rgba(0, 0, 0, 0.2));
  border-radius: var(--modal-content-border-radius, 6px);
  outline: 0;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-modal-backdrop, 1040);
  width: 100vw;
  height: 100vh;
  background-color: var(--modal-backdrop-bg, rgba(0, 0, 0, 0.5));
  opacity: 0;
  transition: opacity var(--modal-backdrop-transition-duration, 0.15s) linear;

  &.modal-backdrop-show {
    opacity: 1;
  }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--modal-header-padding, 16px 24px);
  border-bottom: var(--modal-header-border, 1px solid rgba(0, 0, 0, 0.125));
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;

  .modal-title {
    margin: 0;
    line-height: var(--modal-title-line-height, 1.5);
    font-size: var(--modal-title-font-size, 1.25rem);
    font-weight: var(--modal-title-font-weight, 600);
  }
}

.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: var(--modal-body-padding, 24px);
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--modal-footer-gap, 8px);
  padding: var(--modal-footer-padding, 16px 24px);
  border-top: var(--modal-footer-border, 1px solid rgba(0, 0, 0, 0.125));
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;

  &.modal-footer-center {
    justify-content: center;
  }

  &.modal-footer-between {
    justify-content: space-between;
  }
}

// ACCORDION
.accordion {
  border-radius: var(--accordion-border-radius, 6px);
  overflow: hidden;
}

.accordion-item {
  border: var(--accordion-item-border, 1px solid rgba(0, 0, 0, 0.125));

  &:not(:first-child) {
    border-top: none;
  }

  &:first-child {
    border-top-left-radius: var(--accordion-border-radius, 6px);
    border-top-right-radius: var(--accordion-border-radius, 6px);
  }

  &:last-child {
    border-bottom-left-radius: var(--accordion-border-radius, 6px);
    border-bottom-right-radius: var(--accordion-border-radius, 6px);
  }
}

.accordion-header {
  margin-bottom: 0;
}

.accordion-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--accordion-button-padding, 16px 20px);
  font-size: var(--accordion-button-font-size, 1rem);
  font-weight: var(--accordion-button-font-weight, 500);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow-anchor: none;
  transition: all var(--accordion-button-transition-duration, 0.2s) var(--accordion-button-transition-easing, ease);
  cursor: pointer;

  &:focus {
    z-index: 3;
    outline: var(--accordion-button-focus-outline, 2px solid transparent);
    outline-offset: var(--accordion-button-focus-outline-offset, -2px);
  }

  &::after {
    flex-shrink: 0;
    width: var(--accordion-icon-size, 16px);
    height: var(--accordion-icon-size, 16px);
    margin-left: auto;
    content: '';
    background-image: var(--accordion-button-icon, url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E"));
    background-repeat: no-repeat;
    background-size: var(--accordion-icon-size, 16px);
    transition: transform var(--accordion-icon-transition-duration, 0.2s) var(--accordion-icon-transition-easing, ease);
  }

  &:not(.accordion-button-collapsed)::after {
    transform: rotate(180deg);
  }
}

.accordion-collapse {
  overflow: hidden;
  transition: height var(--accordion-collapse-transition-duration, 0.3s) var(--accordion-collapse-transition-easing, ease);
}

.accordion-body {
  padding: var(--accordion-body-padding, 16px 20px);
}

// ACCESSIBILITY
@media (prefers-reduced-motion: reduce) {
  .alert-close,
  .tooltip,
  .popover,
  .dropdown-toggle::after,
  .modal,
  .modal-dialog,
  .modal-backdrop,
  .accordion-button,
  .accordion-button::after,
  .accordion-collapse {
    transition: none;
  }
}

@media (prefers-contrast: high) {
  .alert,
  .popover,
  .dropdown-menu,
  .modal-content,
  .accordion-item {
    border-width: 2px;
  }

  .alert-close:focus,
  .dropdown-item:focus,
  .accordion-button:focus {
    outline-width: 3px;
  }
}