/* ui/settings-panel.css — Settings dialog (desktop web), opened from
   either the leftbar's gear icon or the profile menu's "Settings" row
   (ui/profile-menu.js) — both call the same MagnetSettingsPanel.toggle().
   Rendered as a centered modal with a dimming backdrop, not a corner
   popover, so it reads the same regardless of which trigger opened it. */

.mg-settings-backdrop {
  position: fixed;
  inset: 0;
  background: var(--mg-scrim);
  z-index: 1499;
}
.mg-settings-backdrop.hidden {
  display: none;
}

.mg-settings-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(480px, 92vw);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  background: var(--mg-surface);
  border: 1px solid var(--mg-border);
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
  z-index: 1500;
  overflow: hidden;
}
.mg-settings-panel.hidden {
  display: none;
}

.mg-settings-panel-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--mg-border);
  font-size: 15px;
  font-weight: 700;
  color: var(--mg-text);
}

.mg-settings-close-btn {
  border: none;
  background: var(--mg-well-2);
  color: var(--mg-text-2);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mg-settings-close-btn:hover {
  background: var(--mg-surface-4);
}

.mg-settings-panel-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 18px 18px;
}

.mg-settings-section {
  padding: 10px 0;
  border-bottom: 1px solid var(--mg-border);
}
.mg-settings-section:last-of-type {
  border-bottom: none;
}

.mg-settings-section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--mg-text-3);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
}

.mg-settings-theme-row {
  display: flex;
  gap: 8px;
}
.mg-settings-theme-btn {
  flex: 1 1 0;
  border: 1px solid var(--mg-border);
  background: var(--mg-surface-3);
  border-radius: 8px;
  padding: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mg-text-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.mg-settings-theme-btn.is-on {
  background: var(--mg-accent-pale);
  border-color: var(--mg-accent);
  color: var(--mg-accent);
}
.mg-settings-theme-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.mg-settings-theme-hint {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--mg-text-3);
}
.mg-settings-theme-hint:empty { display: none; }

.mg-settings-soon {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  background: var(--mg-surface-4);
  color: var(--mg-text-2);
  padding: 1px 5px;
  border-radius: 999px;
}

.mg-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 13.5px;
  color: var(--mg-text);
}
.mg-settings-row--btn {
  width: 100%;
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.mg-settings-row--btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.mg-settings-value {
  font-size: 12.5px;
  color: var(--mg-text-2);
}

/* Two-line row (title + sub) with a trailing action button — used by the
   Data section's Export/Import rows, where a single "label + value" line
   (.mg-settings-row) doesn't leave room for a description. */
.mg-settings-row2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
}
.mg-settings-row2-label {
  min-width: 0;
}
.mg-settings-row2-title {
  font-size: 13.5px;
  color: var(--mg-text);
}
.mg-settings-row2-sub {
  font-size: 11.5px;
  color: var(--mg-text-3);
  margin-top: 1px;
}
.mg-settings-btn {
  flex: 0 0 auto;
  border: 1px solid var(--mg-border);
  background: var(--mg-surface-3);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mg-text);
  cursor: pointer;
}
.mg-settings-btn:hover {
  background: var(--mg-surface-2);
}
.mg-settings-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.mg-settings-btn--danger {
  border-color: var(--mg-danger-tint-2);
  background: var(--mg-danger-tint);
  color: var(--mg-now);
}
.mg-settings-btn--danger:hover {
  background: var(--mg-danger-tint);
}

.mg-settings-toggle {
  border: none;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  background: var(--mg-surface-4);
  color: var(--mg-text-2);
  cursor: pointer;
}
.mg-settings-toggle.is-on {
  background: var(--mg-accent);
  color: var(--mg-on-accent);
}

.mg-settings-linklike {
  border: none;
  background: none;
  color: var(--mg-accent);
  font-size: 12.5px;
  padding: 2px 0 8px;
  cursor: pointer;
}

.mg-settings-sound-picker {
  margin-top: 4px;
}
.mg-settings-sound-picker-value {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--mg-text-3);
  font-size: 12.5px;
}
.mg-settings-chevron {
  display: inline-block;
  transition: transform 0.15s ease;
  font-size: 14px;
}
.mg-settings-sound-picker.is-open .mg-settings-chevron {
  transform: rotate(90deg);
}

.mg-settings-sound-list {
  display: none;
  flex-direction: column;
  gap: 2px;
  max-height: 180px;
  overflow-y: auto;
  margin: 4px 0 2px;
  padding: 6px;
  background: var(--mg-surface-3);
  border-radius: 10px;
}
.mg-settings-sound-list.is-open {
  display: flex;
}

.mg-settings-sound-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-radius: 8px;
  cursor: pointer;
}
.mg-settings-sound-row:hover {
  background: var(--mg-surface-3);
}
.mg-settings-sound-row.is-selected {
  background: var(--mg-accent-pale);
}

.mg-settings-sound-play {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--mg-border);
  background: var(--mg-surface);
  font-size: 10px;
  cursor: pointer;
  flex: 0 0 auto;
}

.mg-settings-sound-name {
  flex: 1 1 auto;
  font-size: 13px;
  color: var(--mg-text);
}

.mg-settings-sound-check {
  opacity: 0;
  color: var(--mg-accent);
  font-weight: 700;
  font-size: 13px;
}
.mg-settings-sound-row.is-selected .mg-settings-sound-check {
  opacity: 1;
}

.mg-settings-footer {
  padding-top: 12px;
  text-align: center;
}
.mg-settings-footer-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--mg-text);
}
.mg-settings-footer-sub {
  font-size: 11px;
  color: var(--mg-text-3);
  margin-top: 2px;
}