/* components.settings-menu.css */
.cmp-settings-menu {
  position: fixed;
  top: 110px;
  right: 48px;
  display:flex; flex-direction:column; gap:10px; align-items:stretch;
  background: linear-gradient(145deg,#2a2d31,#181a1c 65%);
  padding: 12px 14px 14px; border:3px solid #000; border-radius:6px;
  box-shadow:4px 4px 0 #000, 0 0 0 2px #222 inset;
  z-index: 6650; /* above panels */
  width:260px; max-width:260px; min-width:260px;
  font-family:'Bangers',cursive; letter-spacing:.6px;
}
/* Hide on desktop precise-pointer only; keep visible on coarse pointers (tablet) */
@media (min-width: 1025px) and (pointer: fine) { .cmp-settings-menu { display:none; } }
.cmp-settings-menu .sm-head { position:absolute; top:-18px; left:10px; background:var(--action-menu-title-color, #ffd400); color:#111; padding:2px 10px 4px; border:3px solid #000; box-shadow:2px 2px 0 #000; font-size:18px; }
.cmp-settings-menu button { width:100%; padding:8px 16px 10px; font-size:18px; background:#e6e6e6; color:#111; border:none; box-shadow:none; cursor:pointer; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.cmp-settings-menu hr { border:0; border-top:2px solid #333; margin:2px 0; }
.cmp-settings-menu button:hover { filter:brightness(1.08); transform:translate(-2px,-3px); }

/* Persistence section styles */
.cmp-settings-menu .persistence-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cmp-settings-menu .section-header {
  font-size: 16px;
  color: #3fc1c9;
  text-shadow: 0 0 8px rgba(63, 193, 201, 0.5);
  margin-bottom: 4px;
  text-align: center;
}

.cmp-settings-menu .checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  color: #e6e6e6;
}

.cmp-settings-menu .checkbox-label:hover {
  background: rgba(255, 255, 255, 0.15);
}

.cmp-settings-menu .checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.cmp-settings-menu .checkbox-label span {
  flex: 1;
}

/* Toast notification for save confirmations */
.save-confirm-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  background: linear-gradient(135deg, #2a9d8f 0%, #1a5f56 100%);
  color: white;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  border: 2px solid #3fc1c9;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  font-family: 'Orbitron', sans-serif;
  font-size: 1rem;
  z-index: 99998;
  animation: toastSlideIn 0.3s ease-out;
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (max-width: 1024px), (pointer: coarse) {
  .cmp-settings-menu { top:auto; right:8px; bottom:56px; width:max-content; max-width:calc(100vw - 16px); min-width:160px; display:none; transform:none; transition:none; }
  .cmp-settings-menu[data-hamburger-open] { display:flex; }
  .cmp-settings-menu[data-hamburger-corner="left"] { left:8px; right:auto; }
  .cmp-settings-menu button { width:auto; min-width:160px; }
  
  .save-confirm-toast {
    top: auto;
    bottom: 20px;
    right: 50%;
    transform: translateX(50%);
    animation: toastSlideUp 0.3s ease-out;
  }
  
  @keyframes toastSlideUp {
    from {
      opacity: 0;
      transform: translateX(50%) translateY(50px);
    }
    to {
      opacity: 1;
      transform: translateX(50%) translateY(0);
    }
  }
}

.settings-menu-backdrop { display:none; }
@media (max-width: 1024px), (pointer: coarse) {
  .settings-menu-backdrop { position: fixed; inset:0; z-index: 6645; }
  .settings-menu-backdrop[data-show] { display:block; }
}