/*
 * Bootstrap list group theming + full-width row links (.list-row-link).
 * Tokens: --list-row-*, --link-content-*, --list-row-link-hover-fg (base/variables.css).
 * Markup: shared/list_row_link, shared/org_unit_list_row.
 */

.list-group-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-primary);
  color: var(--text-secondary);
  /* Horizontal inset so row text never hugs the hover edge (full-width links + plain rows). */
  padding: var(--space-4) var(--space-4);
  /* Do not change horizontal padding on hover — it narrows the text column and reflows lines. */
  transition: background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), border-radius var(--transition-fast);
}

.list-group-item:hover:not(.list-group-item-action) {
  background: var(--list-row-hover-bg);
  border-radius: var(--radius-md);
}

.list-group-item:last-child {
  border-bottom: none;
}

.list-group-flush .list-group-item {
  border-left: none;
  border-right: none;
}

/*
 * Flush lists in rounded cards: full-width hover (catalog-browse + home dashboard).
 * Nested radius-md on rows reads as a tighter band than the card frame.
 */
.card > .card-body > .list-group-flush .list-group-item:hover,
.card > .card-body > .list-group-flush .list-group-item:focus-within,
.card > .card-body > .list-group-flush a.list-group-item-action.list-row-link:hover,
.card > .card-body > .list-group-flush a.list-group-item-action.list-row-link:focus-visible {
  border-radius: 0;
}

.card > .card-body > .list-group-flush > .list-group-item:last-child:hover,
.card > .card-body > .list-group-flush > .list-group-item:last-child:focus-within,
.card > .card-body > .list-group-flush > a.list-group-item-action.list-row-link:last-child:hover,
.card > .card-body > .list-group-flush > a.list-group-item-action.list-row-link:last-child:focus-visible {
  border-bottom-left-radius: var(--card-frame-radius, var(--radius-lg));
  border-bottom-right-radius: var(--card-frame-radius, var(--radius-lg));
}

/* Clip row hovers to the card’s bottom curve (home-dash-panel sets overflow: visible on the card). */
.card > .card-body:has(> .list-group-flush:last-child) {
  overflow: hidden;
  border-bottom-left-radius: var(--card-frame-radius, var(--radius-lg));
  border-bottom-right-radius: var(--card-frame-radius, var(--radius-lg));
}

/*
 * Title / label + trailing control (Open, Remove, …).
 * Use this instead of px-0 + d-flex — horizontal padding must stay so hover bands don’t hug the card edge.
 */
.list-group-item.list-group-item--split {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.list-group-item.list-group-item--split > :first-child {
  min-width: 0;
}

/* Stretched-link rows (e.g. plastun list, in-progress tasks) */
.clickable-list-row {
  position: relative;
  cursor: pointer;
}

.clickable-list-row .row-primary {
  color: var(--link-content-color);
  font-weight: 600;
  transition: color var(--transition-fast);
}

.clickable-list-row:hover .row-primary,
.clickable-list-row:focus-within .row-primary {
  color: var(--list-row-link-hover-fg);
}

/*
 * App-wide hint for navigable list rows (chevrons are decorative; aria lives on the link).
 * Use on any tappable row — standalone or inside .clickable-list-row.
 */
.list-row-nav-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  color: var(--text-tertiary);
  opacity: 0.82;
  transition:
    color var(--transition-fast),
    opacity var(--transition-fast);
}

.list-row-nav-indicator::after {
  content: "";
  display: block;
  width: 0.42rem;
  height: 0.42rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
}

.clickable-list-row:hover .list-row-nav-indicator,
.clickable-list-row:focus-within .list-row-nav-indicator {
  color: var(--list-row-link-hover-fg);
  opacity: 1;
}

/* Tabir manager — vmilosti rows: title link + buttons + chevron (no stretched-link over actions). */
.list-group-item.tabir-vmilosti-list-row:hover a.app-body-link,
.list-group-item.tabir-vmilosti-list-row:focus-within a.app-body-link {
  color: var(--link-content-hover-color);
}

.list-group-item.tabir-vmilosti-list-row:hover .list-row-nav-indicator,
.list-group-item.tabir-vmilosti-list-row:focus-within .list-row-nav-indicator {
  color: var(--list-row-link-hover-fg);
  opacity: 1;
}

/*
 * Full-width row link — title + optional subtitle + optional meta (badges).
 * Overrides Bootstrap list-group-item-action hover text (otherwise pure white).
 */
.list-group-item.list-row-link {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: var(--space-3);
  text-decoration: none;
}

.list-group-item.list-row-link .list-row-link__main {
  flex: 1 1 auto;
  min-width: 0;
}

.list-group-item.list-row-link .list-row-link__title {
  font-weight: 600;
  overflow-wrap: anywhere;
  word-break: break-word;
  transition: color var(--transition-fast);
}

.list-group-item.list-row-link .list-row-link__subtitle {
  margin-top: var(--space-1);
}

.list-group-item.list-row-link .list-row-link__meta {
  flex: 0 0 auto;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
}

/* Clickable row — green title; hover/focus matches row (mint, not white) */
.list-group-item-action.list-row-link .list-row-link__title {
  color: var(--link-content-color);
}

a.list-group-item-action.list-row-link:hover,
a.list-group-item-action.list-row-link:focus-visible {
  color: var(--list-row-link-hover-fg) !important;
  background-color: var(--list-row-hover-bg) !important;
}

a.list-group-item-action.list-row-link:active {
  color: var(--list-row-link-active-fg) !important;
  background-color: var(--list-row-active-bg) !important;
}

.list-group-item-action.list-row-link:hover .list-row-link__title,
.list-group-item-action.list-row-link:focus-visible .list-row-link__title,
.list-group-item-action.list-row-link:active .list-row-link__title {
  color: inherit !important;
}

a.list-group-item-action.list-row-link:hover .list-row-nav-indicator,
a.list-group-item-action.list-row-link:focus-visible .list-row-nav-indicator {
  color: var(--list-row-link-hover-fg);
  opacity: 1;
}

/* Non-link row (same layout, e.g. dashboard “no access”) */
.list-group-item.list-row-link:not(.list-group-item-action) .list-row-link__title {
  color: var(--text-primary);
}

.list-group-item.list-row-link:not(.list-group-item-action) .list-row-link__title.text-body-secondary {
  color: var(--text-secondary) !important;
}

/* Browse catalog: subsection label (parent stanytsia / hrupa) — not a row, not clickable */
.list-group-item.org-unit-browse-group-heading {
  background: transparent !important;
  border-bottom: none;
  padding-top: var(--space-3);
  padding-bottom: var(--space-2);
  cursor: default;
  pointer-events: none;
}

.list-group-item.org-unit-browse-group-heading:hover {
  background: transparent !important;
}

.org-unit-browse-group-heading__text {
  display: block;
  font-size: var(--font-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/*
 * Stanytsia/hrupa org structure — UPN hnizda + UPYu kurin blocks (structure_branch_unit_group).
 * Singleton primary rows live in their own .list-group; globally .list-group-item:last-child loses
 * bottom border, so the hnizdo/kurin row looked “thicker” / unlike rows in multi-item lists. Restore
 * a divider when nested riys/hurtoks follow; flatten corners on the primary list so it matches flush
 * lists. Outer pb-3 was removed — padding before the group border made blocks uneven vs standalone lists.
 */
.structure-branch-unit-group > .list-group.list-group-flush:has(+ p) > .list-group-item:last-child {
  border-bottom: 1px solid var(--border-primary);
}

.structure-branch-unit-group > .list-group.list-group-flush:first-child > .list-group-item:only-child {
  border-radius: 0;
}

/*
 * Org structure cards (stanytsia): .list-group-item:last-child globally drops its bottom border so
 * list-groups don’t draw a double line against a parent. Hnizda/kurin blocks use .structure-branch-unit-group
 * which applies border-bottom on an outer wrapper — so those blocks still end with a rule. Standalone
 * flush lists (riys, hurtoks, other) end with a list whose last row has no border — looks like a missing
 * trailing separator (often noticed on the last card, e.g. UPYu). Restore the hairline when the flush
 * list is the last direct child of .card-body.
 */
.org-unit-structure-section .card-body > .list-group.list-group-flush:last-child .list-group-item:last-child {
  border-bottom: 1px solid var(--border-primary);
}

/*
 * Locked workspace preview (browse-only riy/hurtok).
 * `.browse-preview-blur__mock` uses pointer-events: none so nothing underneath is clickable.
 * Mock controls use disabled + tabindex=-1; the only working control is the overlay link.
 */
.browse-preview-blur {
  position: relative;
  min-height: 9rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-elevated);
  border: 1px solid var(--border-primary);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent-primary) 6%, transparent),
    0 4px 28px color-mix(in srgb, var(--accent-primary) 10%, transparent);
}

.browse-preview-blur__mock {
  position: relative;
  z-index: 1;
  filter: blur(5px) saturate(0.96);
  opacity: 0.78;
  user-select: none;
  pointer-events: none;
  padding: var(--space-4);
  transform: translateZ(0);
}

.browse-preview-blur__bar {
  display: block;
  height: 0.55rem;
  border-radius: 9999px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--border-secondary) 85%, var(--bg-hover)),
    color-mix(in srgb, var(--border-primary) 90%, var(--text-tertiary))
  );
  opacity: 0.65;
}

.browse-preview-blur__bar--title-spacer {
  flex: 1;
  min-width: 35%;
  max-width: 55%;
}

/* Layout only — scrim + ribbon styling in components/browse_preview.css (last in layout). */
.browse-preview-blur__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  pointer-events: none;
  border-radius: inherit;
}

.browse-preview-blur__overlay-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  max-width: 18rem;
  margin-inline: auto;
  pointer-events: auto;
}