/* =============================================
   Foundry Dark Mode Toggle
   Uses only --foundry-* CSS custom properties.
   Adapts automatically to any theme.
   ============================================= */

/* Floating position (auto-injected via hook) */
.foundry-dark-mode-toggle--floating {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 40;
}

/* Base toggle container */
.foundry-dark-mode-toggle {
  display: inline-flex;
  align-items: center;
}

/* The button */
.foundry-dark-mode-toggle button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--foundry-radius-sm, 0.5rem);
  border: 1px solid var(--foundry-border, #e2e8f0);
  background: var(--foundry-surface, #ffffff);
  color: var(--foundry-text, #0f172a);
  cursor: pointer;
  box-shadow: var(--foundry-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1));
  transition:
    background 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
  padding: 0;
}

.foundry-dark-mode-toggle button:hover {
  background: var(--foundry-surface-soft, #f8fafc);
  border-color: var(--foundry-border-strong, #cbd5e1);
  box-shadow: var(--foundry-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.1));
  transform: translateY(-1px);
}

.foundry-dark-mode-toggle button:focus-visible {
  outline: 2px solid var(--foundry-brand-accent, #3b82f6);
  outline-offset: 2px;
}

/* SVG icon sizing */
.foundry-dark-mode-toggle svg {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  transition: opacity 120ms ease;
}

/* Show/hide icons based on current mode */
/* Default: show system icon */
.foundry-dark-mode-toggle svg[data-icon="system"] { display: block; }
.foundry-dark-mode-toggle svg[data-icon="light"]  { display: none; }
.foundry-dark-mode-toggle svg[data-icon="dark"]   { display: none; }

[data-foundry-theme-toggle][data-mode="light"] svg[data-icon="system"] { display: none; }
[data-foundry-theme-toggle][data-mode="light"] svg[data-icon="light"]  { display: block; }
[data-foundry-theme-toggle][data-mode="light"] svg[data-icon="dark"]   { display: none; }

[data-foundry-theme-toggle][data-mode="dark"] svg[data-icon="system"] { display: none; }
[data-foundry-theme-toggle][data-mode="dark"] svg[data-icon="light"]  { display: none; }
[data-foundry-theme-toggle][data-mode="dark"] svg[data-icon="dark"]   { display: block; }

/* Visually hidden label for screen readers */
.foundry-dark-mode-toggle__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Active mode accent on the button */
[data-foundry-theme-toggle][data-mode="dark"] button,
[data-foundry-theme-toggle][data-mode="light"] button {
  border-color: var(--foundry-brand-accent, #3b82f6);
}

.foundry-theme-mode-picker {
  display: grid;
  gap: 0.45rem;
}

.foundry-theme-mode-picker__option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.72rem 0.85rem;
  border-radius: 0.9rem;
  border: 1px solid var(--foundry-border, #e2e8f0);
  background: color-mix(in srgb, var(--foundry-surface-soft, #f8fafc) 70%, transparent);
  color: var(--foundry-text, #0f172a);
  cursor: pointer;
  transition:
    background 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

.foundry-theme-mode-picker__option:hover {
  border-color: var(--foundry-border-strong, #cbd5e1);
  transform: translateY(-1px);
}

.foundry-theme-mode-picker__option:focus-visible {
  outline: 2px solid var(--foundry-brand-accent, #3b82f6);
  outline-offset: 2px;
}

.foundry-theme-mode-picker__option[aria-checked="true"] {
  border-color: color-mix(in srgb, var(--foundry-brand-accent, #3b82f6) 46%, var(--foundry-border-strong, #cbd5e1));
  background: color-mix(in srgb, var(--foundry-brand-accent, #3b82f6) 10%, var(--foundry-surface, #ffffff));
  box-shadow: var(--foundry-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1));
}

.foundry-theme-mode-picker__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.foundry-theme-mode-picker__icon svg {
  width: 1rem;
  height: 1rem;
}

.foundry-theme-mode-picker__label {
  flex: 1 1 auto;
  text-align: left;
  font-weight: 600;
}

.foundry-theme-mode-picker__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  color: var(--foundry-brand-accent, #3b82f6);
  transition: opacity 120ms ease;
}

.foundry-theme-mode-picker__check svg {
  width: 1rem;
  height: 1rem;
}

.foundry-theme-mode-picker__option[aria-checked="true"] .foundry-theme-mode-picker__check {
  opacity: 1;
}