/* Shared by the management app and its standalone landing page. */
:root {
  --interaction-background: #006940;
  --interaction-foreground: #fff;
}

/* Selection fields, their choices, and hover help use the same palette. */
select,
select option,
[role="combobox"],
[role="listbox"],
[role="option"],
[role="tooltip"] {
  background-color: #fff !important;
  color: #006940 !important;
}

/* Mouse and keyboard feedback. Disabled controls retain their disabled styling. */
:is(button, a[href], summary, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select,
    [role="button"], [role="combobox"], [role="option"], [role="tab"],
    [role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"],
    [class*="hover:bg-"]):not(:disabled):not([aria-disabled="true"]):not([data-disabled]):is(:hover, :focus-visible),
:is([role="option"], [role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"])[data-highlighted],
:is(button, a, [role="tab"], [role="option"], [role="row"])[aria-selected="true"],
:is(button, a)[aria-pressed="true"],
a[aria-current="page"],
[role="tab"][data-state="active"],
[role="option"][data-state="checked"],
tr:hover,
tr[data-state="selected"],
select option:checked,
details[open] > summary {
  background-color: var(--interaction-background) !important;
  color: var(--interaction-foreground) !important;
  background-image: none !important;
  font-weight: 700 !important;
}

/* Keep selection distinguishable even against a white surface. */
a[aria-current="page"],
[role="tab"][data-state="active"],
button[aria-pressed="true"],
[role="option"][aria-selected="true"] {
  box-shadow: inset 0 0 0 1px var(--interaction-background);
}

:is(button, a[href], summary, [role="button"], [role="tab"], [role="option"]):not(:disabled):not([aria-disabled="true"]):not([data-disabled]):is(:hover, :focus-visible, [aria-pressed="true"], [aria-selected="true"], [aria-current="page"])
:where(span:not([style*="background-color"]), p, h2, h3, h4),
details[open] > summary :where(span, h2, h3, h4),
tr:is(:hover, [data-state="selected"]) :where(td, p, span:not([style*="background-color"])) {
  color: var(--interaction-foreground) !important;
  font-weight: 700 !important;
}

/* Org chart cards are navigation links; all card text shares the active palette. */
.org-node:is(:hover, :focus-visible, :active),
.org-node:is(:hover, :focus-visible, :active) p {
  background-color: #006940 !important;
  color: #fff !important;
  font-weight: 700 !important;
}