/* Shared skin for organization-tree option rows.
   Module styles keep control of geometry, icons, and indentation. */
:is(.history-org-node, .inventory-org-row, .device-org-row, .customer-org-node, .store-org-tree-row).org-option-row {
  --org-option-radius: 8px;
  --org-option-indicator-width: 2px;
  --org-option-indicator-color: #5f4be8;
  position: relative;
  border: 1px solid transparent !important;
  border-radius: var(--org-option-radius) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}

:is(.history-org-node, .inventory-org-row, .device-org-row, .customer-org-node, .store-org-tree-row).org-option-row.selected {
  z-index: 1;
  border-color: #d7d2fb !important;
  background: #f6f5ff !important;
  box-shadow: 0 9px 20px rgba(89, 77, 203, .14) !important;
  transform: translateY(-1px);
}

@media (hover: hover) {
  :is(.history-org-node, .inventory-org-row, .device-org-row, .customer-org-node, .store-org-tree-row).org-option-row:hover {
    z-index: 1;
    border-color: #ded9ff !important;
    background: #f5f6f9 !important;
    box-shadow: 0 5px 13px rgba(45, 55, 87, .09), inset var(--org-option-indicator-width) 0 var(--org-option-indicator-color) !important;
    transform: translateY(-1px);
  }

  :is(.history-org-node, .inventory-org-row, .device-org-row, .customer-org-node, .store-org-tree-row).org-option-row.selected:hover {
    border-color: #d7d2fb !important;
    background: #f6f5ff !important;
    box-shadow: 0 9px 20px rgba(89, 77, 203, .14), inset var(--org-option-indicator-width) 0 var(--org-option-indicator-color) !important;
  }
}

:is(.history-org-node, .inventory-org-row, .device-org-row, .customer-org-node, .store-org-tree-row).org-option-row.org-option-click-indicator {
  z-index: 2;
  border-color: #d7d2fb !important;
  background: #f6f5ff !important;
  box-shadow: 0 9px 20px rgba(89, 77, 203, .14), inset var(--org-option-indicator-width) 0 var(--org-option-indicator-color) !important;
  transform: translateY(-1px);
}

:is(.history-org-node, .inventory-org-row, .device-org-row, .customer-org-node, .store-org-tree-row).org-option-row.is-selecting {
  animation: organization-option-selection-in .34s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes organization-option-selection-in {
  0% {
    opacity: .5;
    transform: translateY(5px) scale(.985);
    box-shadow: 0 5px 13px rgba(45, 55, 87, .09), inset 0 0 transparent;
  }
  62% {
    opacity: 1;
    transform: translateY(-3px) scale(1.005);
    box-shadow: 0 9px 20px rgba(89, 77, 203, .14), inset 3px 0 var(--org-option-indicator-color);
  }
  100% {
    opacity: 1;
    transform: translateY(-1px) scale(1);
    box-shadow: 0 9px 20px rgba(89, 77, 203, .14), inset var(--org-option-indicator-width) 0 var(--org-option-indicator-color);
  }
}

body[data-theme="dark"] :is(.history-org-node, .inventory-org-row, .device-org-row, .customer-org-node, .store-org-tree-row).org-option-row.selected {
  --org-option-indicator-color: #7668df;
  border-color: #625bb2 !important;
  background: #242442 !important;
  box-shadow: 0 9px 20px rgba(0, 0, 0, .34) !important;
}

@media (hover: hover) {
  body[data-theme="dark"] :is(.history-org-node, .inventory-org-row, .device-org-row, .customer-org-node, .store-org-tree-row).org-option-row:hover {
    border-color: #4a5670 !important;
    background: #202a3a !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .28), inset var(--org-option-indicator-width) 0 var(--org-option-indicator-color) !important;
  }

  body[data-theme="dark"] :is(.history-org-node, .inventory-org-row, .device-org-row, .customer-org-node, .store-org-tree-row).org-option-row.selected:hover {
    border-color: #625bb2 !important;
    background: #242442 !important;
    box-shadow: 0 9px 20px rgba(0, 0, 0, .34), inset var(--org-option-indicator-width) 0 var(--org-option-indicator-color) !important;
  }
}

body[data-theme="dark"] :is(.history-org-node, .inventory-org-row, .device-org-row, .customer-org-node, .store-org-tree-row).org-option-row.org-option-click-indicator {
  border-color: #625bb2 !important;
  background: #242442 !important;
  box-shadow: 0 9px 20px rgba(0, 0, 0, .34), inset var(--org-option-indicator-width) 0 var(--org-option-indicator-color) !important;
}

@media (prefers-reduced-motion: reduce) {
  :is(.history-org-node, .inventory-org-row, .device-org-row, .customer-org-node, .store-org-tree-row).org-option-row {
    transition: none;
  }

  :is(.history-org-node, .inventory-org-row, .device-org-row, .customer-org-node, .store-org-tree-row).org-option-row.is-selecting {
    animation: none !important;
  }
}