/*
 * theme-toggle.css — icon button used by theme_toggle_button.html partial.
 * Reuses CSS variables defined in parent.css / teacher.css / tokens.css.
 */

.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary, #64748b);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  flex-shrink: 0;
  text-decoration: none; /* 設定/登出以 <a> 掛此 class，蓋掉 UA 底線 */
}

.theme-toggle-btn:hover {
  background: var(--bg-hover, rgba(0, 0, 0, 0.04));
  text-decoration: none;
}

.theme-toggle-btn:focus-visible {
  outline: 2px solid var(--brand-primary, #475569);
  outline-offset: 2px;
}

.theme-toggle-btn i {
  font-size: 1rem;
  line-height: 1;
}

/* Floating variant used by auth pages that have no header bar. */
.theme-toggle-btn--floating {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: var(--z-dropdown, 1000);
  background: var(--bg-card, #ffffff);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Dark-mode overrides — teacher.css / parent.css already flip the
   --border-color / --text-secondary / --bg-card variables under
   html.dark-theme, so most styles update automatically. These rules
   handle what variables don't cover. */
html.dark-theme .theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}

html.dark-theme .theme-toggle-btn--floating {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}