fusion/packages/dashboard/app/components/ThemeDropdown.css

.theme-dropdown {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-inline-size: 0;
}

/*
FNXC:Theme 2026-06-20-00:00:
FN-6826 requires the Command Center theme dropdown to paint on top of all sibling Command Center cards/views only while open. Use a local dropdown-tier z-index above DateRangePicker's 20 and below app chrome/mobile nav tiers, then reset it in the mobile in-flow branch so closed or static content never floats above unrelated chrome.

FNXC:Theme 2026-06-23-22:35:
Glass theme surfaces create stronger translucent stacking contexts, so the Command Center theme dropdown must use the app's highest overlay tier while open. Keep the closed root unstacked and keep the mobile in-flow branch reset to auto so this only affects the desktop/tablet floating popover.
*/
.theme-dropdown.open {
  z-index: 10002;
}

.theme-dropdown-trigger {
  justify-content: space-between;
  gap: var(--space-sm);
  inline-size: 100%;
  min-inline-size: 0;
}

.theme-dropdown-trigger .theme-option-swatch,
.theme-dropdown-option .theme-option-swatch {
  flex: 0 0 auto;
}

.theme-dropdown-trigger-label,
.theme-dropdown-option-label {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.theme-dropdown-trigger--current-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-color: var(--border);
  background: var(--card);
  color: var(--text);
  text-align: start;
}

.theme-dropdown-current-row-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: calc(var(--space-2xl) + var(--space-md));
  block-size: calc(var(--space-2xl) + var(--space-md));
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--todo);
}

.theme-dropdown-current-row-info {
  display: grid;
  gap: var(--space-xs);
  min-inline-size: 0;
}

.theme-dropdown-current-row-label {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.theme-dropdown-current-row-value {
  overflow: hidden;
  color: var(--text);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.theme-dropdown-trigger--current-row:hover,
.theme-dropdown-trigger--current-row:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--card) 90%, var(--accent));
}

.theme-dropdown-modes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.theme-dropdown-mode-btn {
  gap: var(--space-xs);
}

.theme-dropdown-mode-btn.active {
  border-color: var(--accent);
  color: var(--accent);
}

.theme-dropdown-popover {
  position: absolute;
  z-index: 10002;
  inset-block-start: calc(100% + var(--space-xs));
  inset-inline: 0;
  padding: var(--space-sm);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  box-shadow: var(--shadow-lg);
}

.theme-dropdown-list {
  display: grid;
  gap: var(--space-xs);
  max-block-size: min(60vh, calc(var(--space-2xl) * 12));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.theme-dropdown-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm);
  inline-size: 100%;
  padding: var(--space-sm);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: start;
}

.theme-dropdown-option:hover,
.theme-dropdown-option:focus-visible,
.theme-dropdown-option.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  outline: none;
}

@media (max-width: 768px) {
  .theme-dropdown.open {
    z-index: auto;
  }

  .theme-dropdown-popover {
    position: static;
    z-index: auto;
    margin-block-start: var(--space-xs);
  }

  .theme-dropdown-list {
    max-block-size: min(50vh, calc(var(--space-2xl) * 10));
  }

  .theme-dropdown-trigger--current-row {
    padding: var(--space-md);
  }
}