/*
 * theme.css — botão e ícone de alternância dark/light, compartilhados por todos os dashboards.
 */

.theme-btn {
  width: 42px; height: 24px; border-radius: 12px;
  background: var(--surface3); border: 1px solid var(--border2);
  cursor: pointer; position: relative;
  transition: background .3s, border-color .3s;
  flex-shrink: 0;
}
.theme-btn::after {
  content: ''; position: absolute;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent);
  top: 2px; left: 2px;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
[data-theme="light"] .theme-btn::after { transform: translateX(18px); }
.theme-icon { font-size: 13px; color: var(--text2); }