/* Loader para pantalla de carga */
.loader {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #ffb492;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
#loadingScreen {
  transition: opacity 0.5s cubic-bezier(0.4,0,0.2,1);
}
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: "Inter", sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
  overflow: auto;
  position: relative;
  width: 100%;
}

.container {
  display: grid;
  grid-template-columns: 25em 1fr;
  grid-template-rows: auto 15px 1fr auto;
  height: 100vh;
  gap: 0;
  padding: 0px 20px 20px;
}

.menu {
  grid-row: 1 / 5;
  grid-column: 1 / 2;
  background-color: var(--card-bg);
  border-radius: 25px;
  margin: 35px 15px 17px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 19px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  animation: menuSlideIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes menuSlideIn {
  0% {
    opacity: 0;
    transform: translateX(-50px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.menu-title {
  justify-content: space-between;
  align-items: center;
  font-size: 2.5rem;
  font-weight: 800;
  margin: 0;
  padding: 10px;
  text-align: center;
}

  .menu-text {
    font-size: 2rem;
    font-weight: 800;
    text-align: center;
  }.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-color);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 5px;
}

.menu-toggle:hover {
  color: var(--primary-color);
}

.menu-button {
  padding: 8px;
  border: none;
  border-radius: 15px;
  background-color: var(--menu-button-bg);
  color: var(--text-color);
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding-left: 1.0em;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  transform: scale(1);
  overflow: hidden;
  margin: 0 10px;
}

.menu-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-button .menu-icon {
  position: absolute;
  left: 0.8em;
  font-size: 1.3em;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-color);
  width: 1.5em;
  height: 1.5em;
  pointer-events: none;
  transition: all 0.3s ease;
}

.menu-button span {
  flex: 1;
  text-align: center;
  width: 100%;
  display: block;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(0);
}

.menu-button:hover {
  background-color: var(--menu-button-hover);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4);
}

.menu-button:hover::before {
  left: 100%;
}

.menu-button:hover .menu-icon {
  transform: translateX(2px) rotate(5deg) scale(1.1);
}

.menu-button:hover span {
  transform: translateX(-2px);
}

.menu-button:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-button:active .menu-icon {
  transform: translateX(0) rotate(0deg) scale(1);
}

.menu-button:active span {
  transform: translateX(0);
}

/* Animación de entrada para los botones del menú */
@keyframes menuButtonSlideIn {
  0% {
    opacity: 0;
    transform: translateX(-30px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* Animación de pulsación suave */
@keyframes menuButtonPulse {
  0% {
    transform: translateY(-2px) scale(1.02);
  }
  50% {
    transform: translateY(-3px) scale(1.03);
  }
  100% {
    transform: translateY(-2px) scale(1.02);
  }
}

.menu-button {
  animation: menuButtonSlideIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.menu-button:nth-child(2) { animation-delay: 0.1s; }
.menu-button:nth-child(3) { animation-delay: 0.2s; }
.menu-button:nth-child(4) { animation-delay: 0.3s; }
.menu-button:nth-child(5) { animation-delay: 0.4s; }
.menu-button:nth-child(6) { animation-delay: 0.5s; }
.menu-button:nth-child(7) { animation-delay: 0.6s; }

/* Clase para activar la animación de pulsación */
.menu-button.pulse-animation {
  animation: menuButtonPulse 0.6s ease-in-out;
}

/* Efecto de ondas (ripple) */
.menu-button {
  position: relative;
}

.menu-button .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: scale(0);
  animation: rippleEffect 0.6s linear;
  pointer-events: none;
}

@keyframes rippleEffect {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Degradado de colores claros y vibrantes para los botones del menú */
#homeButton {
  background-color: #fff2e6 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#languageButton {
  background-color: #ffe8d9 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#themeButton {
  background-color: #ffdecc !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#clearButton {
  background-color: #ffd4bf !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#savedButton {
  background-color: #ffcab2 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#configButton {
  background-color: #ffc0a5 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Estados hover para cada botón con colores más vibrantes */
#homeButton:hover {
  background-color: #ffe6d3 !important;
  transform: translateY(-2px) scale(1.02) !important;
}

#languageButton:hover {
  background-color: #ffdcc6 !important;
  transform: translateY(-2px) scale(1.02) !important;
}

#themeButton:hover {
  background-color: #ffd2b9 !important;
  transform: translateY(-2px) scale(1.02) !important;
}

#clearButton:hover {
  background-color: #ffc8ac !important;
  transform: translateY(-2px) scale(1.02) !important;
}

#savedButton:hover {
  background-color: #ffbe9f !important;
  transform: translateY(-2px) scale(1.02) !important;
}

#configButton:hover {
  background-color: #ffb492 !important;
  transform: translateY(-2px) scale(1.02) !important;
}

/* Los colores pasteles mantienen buen contraste con el texto oscuro por defecto */

/* Estilos para modo oscuro - mejor contraste en botones del menú */
[data-theme="dark"] #homeButton,
[data-theme="dark"] #languageButton,
[data-theme="dark"] #themeButton,
[data-theme="dark"] #clearButton,
[data-theme="dark"] #savedButton,
[data-theme="dark"] #configButton {
  color: #1a1a1a !important;
}

[data-theme="dark"] #homeButton .menu-icon,
[data-theme="dark"] #languageButton .menu-icon,
[data-theme="dark"] #themeButton .menu-icon,
[data-theme="dark"] #clearButton .menu-icon,
[data-theme="dark"] #savedButton .menu-icon,
[data-theme="dark"] #configButton .menu-icon {
  color: #1a1a1a !important;
}

[data-theme="dark"] #homeButton:hover,
[data-theme="dark"] #languageButton:hover,
[data-theme="dark"] #themeButton:hover,
[data-theme="dark"] #clearButton:hover,
[data-theme="dark"] #savedButton:hover,
[data-theme="dark"] #configButton:hover {
  color: #1a1a1a !important;
}

[data-theme="dark"] #homeButton:hover .menu-icon,
[data-theme="dark"] #languageButton:hover .menu-icon,
[data-theme="dark"] #themeButton:hover .menu-icon,
[data-theme="dark"] #clearButton:hover .menu-icon,
[data-theme="dark"] #savedButton:hover .menu-icon,
[data-theme="dark"] #configButton:hover .menu-icon {
  color: #1a1a1a !important;
}


/* Also ensure selected option in dropdown uses subtle border in dark mode */
[data-theme="dark"] .select2-container--default .select2-results__option--selected {
  background-color: #666565;
}

.topbar {
  grid-column: 2 / 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 35px 26px 32px;
  gap: 30px;
  flex-wrap: nowrap;
  min-width: 0;
  background-color: var(--bg-color);
}

.topbar-left {
  display: flex;
  gap: 16px;
}

.box {
  background-color: var(--card-bg);
  border-radius: 10px;
  height: 5em;
  transition: background-color 0.3s ease;
}

.box.transparent {
  background-color: transparent;
}

.box.small {
  width: 5em;
  display: flex;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.box.small img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
}

.box.medium {
  width: 30em;
}

.box.large {
  width: 160px;
}

.logo {
  font-weight: bold;
  font-size: 2.5rem;
  color: var(--text-color);
  /* Keep the logo from shrinking when the topbar compresses; let the mob select shrink instead */
  flex: 0 0 auto;
  min-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
}

/* Select2 custom visuals for options and selections (images + text) */
.select2-option-wrap { display: flex; align-items: center; gap: 10px; }
.select2-option-img { width: 28px; height: 28px; object-fit: cover; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,0.18); }
.select2-option-text { font-size: 0.95rem; color: var(--text-color); }

.select2-selection-wrap { display:flex; align-items:center; gap:8px; }
.select2-selection-img { width:18px; height:18px; object-fit:cover; border-radius:4px; }
.select2-selection-text { font-size:0.9rem; color:var(--text-color); margin-left:6px; }

/* Tweak Select2 containers for a more modern look */
.select2-container--default .select2-selection--single {
  border-radius: 10px; padding: 8px 12px; border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 6px 18px rgba(0,0,0,0.06); min-height:44px;
}
.select2-container--default .select2-selection--multiple {
  border-radius: 10px; padding: 8px 10px; border: 1px solid rgba(0,0,0,0.08); min-height:44px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(0,0,0,0.06); color: var(--text-color); padding: 8px 11px; border-radius: 8px; display:flex; align-items:center; gap:6px; margin:8px 5px; font-size:0.88rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove { margin-right:5px; border-right: none; right: 0px !important; left: revert; margin: 8px;}
.select2-container--default .select2-results__option { padding: 8px 12px; }

/* Ensure dropdown images align nicely */
.select2-dropdown .select2-option-img { width: 26px; height:26px; }

/* Ensure consistent rendered text size/line-height across selects */
.select2-container .select2-selection__rendered { font-size: 0.95rem; line-height: 28px; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 28px; padding-left:2px; }
.select2-container--default .select2-selection--multiple .select2-selection__rendered { line-height: 20px; }

/* Loot Tags modal specific Select2 overrides */
#lootTagsPopup .select2-container--default .select2-selection--single,
#lootTagsPopup .select2-container--default .select2-selection--multiple {
  background-color: var(--input-bg) !important;
  border: 1px solid #ccc !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
#lootTagsPopup .select2-container--default .select2-selection--single { min-height:45px; height: 24px; border-radius: 11px;}
#lootTagsPopup .select2-container--default .select2-selection--multiple { min-height:44px; }

/* Make variant and color selects match enchant select height inside Loot Tags */
#lootTagsPopup .select2-variant-container .select2-selection--single,
#lootTagsPopup .select2-color-container .select2-selection--single,
#lootTagsPopup .select2-variant-container .select2-selection--multiple,
#lootTagsPopup .select2-color-container .select2-selection--multiple {
  min-height: 45px;
  height: 24px;
  border-radius: 11px;
}
#lootTagsPopup .select2-variant-container .select2-selection__rendered,
#lootTagsPopup .select2-color-container .select2-selection__rendered {
  line-height: 28px;
}

/* Dark theme adjustments */
[data-theme="dark"] .select2-container--default .select2-selection--single,
[data-theme="dark"] .select2-container--default .select2-selection--multiple { border-color: rgba(255,255,255,0.06); }


.mob-select-wrapper {
  display: flex;
  align-items: center;
  gap: 30px;
  width: 100%;
}

.select2-container--default .select2-selection--single {
  border: none;
}

.select2-container--default .select2-results>.select2-results__options {
  max-height: 250px;
}

/* Help button styling for loot tags */
.lt-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: 7px;
  border-radius: 7px;
  background: var(--input-bg);
  border: 1px solid rgba(0,0,0,0.08);
  color: var(--text-color);
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}
.lt-help:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
.lt-tooltip{
  background: var(--popup-accent);
  color: var(--text-on-accent, #fff);
  padding: 8px 10px;
  border-radius: 6px;
  max-width: 90vw;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  font-size: 13px;
  word-wrap: break-word;
  white-space: normal;
  line-height: 1.4;
  animation: tooltipSlideIn 0.2s ease-out;
}

@keyframes tooltipSlideIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile optimization for tooltips */
@media (max-width: 768px) {
  .lt-tooltip {
    max-width: 85vw;
    padding: 10px 12px;
    font-size: 14px;
    max-height: 50vh;
    overflow-y: auto;
  }
}

.mob-select-wrapper .box.small {
  flex: 0 0 auto;
}

.select-with-images {
  flex: 1;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

/* Make Select2 containers respect the parent widths */
.select2-container {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

.select2-container--default .select2-selection--single {
  width: 100% !important;
}
.divider {
  grid-column: 2 / 3;
  height: 7px;
  background-color: var(--card-bg);
  margin-left: 26px;
  margin-right: 26px;
  border-radius: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.footer-divider {
  display: none;
  height: 7px;
  background-color: var(--card-bg);
  margin-left: 18px;
  margin-right: 18px;
  border-radius: 20px;
}

.main {
  grid-column: 2 / 3;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 19px 16px 0px 16px;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  /* Asegura que el grid ocupe el espacio disponible */
  height: 100%;
  /* Elimina el gap extra si solo hay una card-grid */
}

/* Nuevo: grid para las cards */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr); /* limit to 3 filas (3x3 visible area) */
  gap: 20px;
  padding: 10px;
  height: 100%;
  overflow: hidden; /* hide any cards outside the 3x3 area */
}

/* Opcional: en móvil, diseño horizontal con icono y card */
@media screen and (max-width: 900px) {
  /* On small viewports, prevent the document from scrolling so only
     the cards area handles vertical scroll. This avoids the double-scroll
     experience on mobile devices. */
  html, body {
    overflow: hidden;
    height: 100%;
  }
  .card-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    gap: 15px !important;
    max-height: none !important;
    height: auto !important;
    padding: 5px !important;
  }
  
  .card {
    height: 60px !important;
    flex-direction: row !important;
    gap: 10px !important;
    padding: 0 15px !important;
    justify-content: flex-start !important;
    display: flex !important;
    align-items: center !important;
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  
  .card + .card-icon {
    display: none !important;
  }
  
  .card::before {
    content: '' !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 60px !important;
    height: 60px !important;
    background-color: var(--card-bg) !important;
    border-radius: 15px !important;
    cursor: pointer !important;
    transform: scale(1) !important;
    transition: transform 0.2s ease !important;
    flex-shrink: 0 !important;
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
    font-size: 1.5rem !important;
    color: var(--text-color) !important;
  }
  
  .card i {
    display: none !important;
  }
  
  .card span.card-text {
    opacity: 1 !important;
    position: static !important;
    font-size: 1.1rem;
  }
  
  .question-icon {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 20px !important;
    height: 20px !important;
    font-size: 12px !important;
  }
}

.card {
  background-color: var(--card-bg);
  height: 100%;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: bold;
  transform: scale(1);
  transition: transform 0.2s ease;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
  flex-direction: column;
  gap: 10px;
}

.card i {
  font-size: 1.8rem;
  transition: all 0.3s ease;
  color: var(--text-color);
}

.card span.card-text {
  opacity: 0;
  transition: opacity 0.3s ease;
  position: absolute;
  bottom: 15px;
}

.card:hover span.card-text {
  opacity: 1;
}

.card:hover i {
  transform: translateY(-10px);
}

.question-icon {
  position: absolute;
  top: 13px;
  right: 13px;
  width: 28px; 
  height: 28px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px; 
  color: #666;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 2;
  transition: box-shadow 0.2s;
}

.question-icon::after {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: transparent;
  z-index: 1;
}

.question-icon:active {
  box-shadow: 0 0 0 4px #7dbbff55;
}

.card:hover {
  transform: scale(1.05);
}

.card:active {
  transform: scale(0.95);
}

.card-icon {
  display: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
}

  .footer {
  grid-column: 2 / 3;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  padding: 16px 26px 16px 25px;
  background-color: var(--bg-color);
}

.footer-box {
  background-color: var(--card-bg);
  border-radius: 15px;
  height: 5em;
  transform: scale(1);
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 5.2rem;
  padding: 0 12px;
}
.footer-box:hover {
  transform: scale(1.05);
}

.footer-box:active {
  transform: scale(0.95);
}
.footer-box i {
  font-size: 1.8rem;
  color: var(--text-color);
}

.footer-box.copied {
  background-color: #7dbbff;
}

.footer-box.copied i {
  color: white;
}

.select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  height: 50%;
  position: absolute;
  top: 20px;
  right: 14px;
  width: 20px;
}

.select2-container--default .select2-selection--single {
  height: 4.8rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding: 0.4rem 1rem;
  font-size: 1.1rem;
  color: var(--popup-text-color);
  background-color: var(--input-bg);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.select2-selection__rendered img {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-right: 8px;
  border-radius: 4px;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #ccc;
  margin: 5px;
  width: calc(100% - 10px);
}

.select2-dropdown {
  border-radius: 15px;
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3);
  border: 1px solid #eee; 
}

.select2-results__option {
  padding: 12px;
  transition: background-color 0.2s;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #7dbbff;
}

.popup-button#itemStatusButton.saved {
  background: #86efac;
  color: #166534;
}

.popup-button#itemStatusButton.not-saved {
  background: #fca5a5;
  color: #991b1b;
}

.select2-dropdown {
  animation: dropdownFade 0.2s ease-out;
}

@keyframes dropdownFade {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mobile-header-bg {
  display: none;
  background-color: var(--bg-color);
}

.footer-box-big {
  background-color: var(--card-bg);
  border-radius: 15px;
  height: 5em;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  padding: 0 15px;
  overflow-x: auto;
  font-family: 'Consolas', monospace;
  white-space: nowrap;
  position: relative;
  display: flex;
  align-items: center;
  scrollbar-width: thin !important;
}

/* Botón de guardado en la esquina superior derecha */
.footer-save-btn {
  /* Elimina position:absolute y top/right para que fluya en línea */
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0 10px 0 0;
  z-index: 2;
  font-size: 1.6rem;
  color: var(--text-color);
  transition: color 0.2s;
  vertical-align: middle;
}
.footer-save-btn.saved i {
  color: #FFD600; /* Amarillo */
}
.footer-save-btn i {
  pointer-events: none;
}

.footer-box-big::-webkit-scrollbar {
  height: 8px;
}

.footer-box-big::-webkit-scrollbar-track {
  background: transparent;
}

.footer-box-big::-webkit-scrollbar-thumb {
  background: var(--card-bg);
  border-radius: 4px;
}

.footer-box-big::-webkit-scrollbar-thumb:hover {
  background: var(--menu-button-hover);
}

.footer-box-big .command-summon {
  color: #ff69b4;
  margin: 0px 5px 0px 0px;
}

/* Mobile: collapse random + copy into a single toggle */
@media screen and (max-width: 900px) {
.footer-box {
  min-width: 4.2rem;
}

  #footerRandomButton, #footerCopyButton {
    display: none !important;
  }
  /* Show mobile toggle */
  #footerMobileToggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  /* Actions float above the toggle (do not occupy layout space) */
  #footerMobileToggle{ position: relative; }
  .mobile-actions{
    position: absolute;
    bottom: calc(100% + 32px);
    right: 0;
    display: none;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    pointer-events: auto;
  }
  .mobile-actions.show{ display: flex; }
  /* Prevent the parent footer-box from scaling on press so children can animate independently */
  #footerMobileToggle, #footerMobileToggle:hover, #footerMobileToggle:active { transform: none !important; }

  .mobile-action{
    background-color: var(--card-bg);
    border-radius: 10px;
    /* match toggle size (set via CSS variable from JS) */
    width: var(--toggle-size, 52px);
    height: var(--toggle-size, 52px);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow: 0 6px 14px rgba(0,0,0,0.18);
    transition: transform 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease, color 0.12s ease;
    cursor: pointer;
    user-select: none;
  }

  /* Independent press animation for each mobile action */
  .mobile-action:active {
    transform: translateY(1px) scale(0.96);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    background-color: #7dbbff; /* similar to .footer-box.copied */
  }
  .mobile-action:active i { color: #ffffff; }
}

/* Hide mobile toggle by default on larger screens */
#footerMobileToggle{ display:none; }

.select2-container--default
  .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: #c0ddfc;
}

.position-type-selector {
  margin-bottom: 1.5rem;
}

.popup-select {
  width: 100%;
  height: 3rem;
  padding: 0.8rem 1.2rem;
  border-radius: 8px;
  border: 1px solid #b2b2b2;
  font-size: 1.1rem;
  color: var(--popup-text-color);
  background-color: var(--input-bg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.popup-select:focus {
  outline: none;
  box-shadow: var(--popup-focus-shadow);
}

.popup-toggle-button {
  width: 100%;
  height: 2.8rem;
  padding: 0.8rem 1.2rem;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 1.1rem;
  color: var(--popup-text-color);
  background-color: var(--input-bg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.popup-toggle-button i {
  font-size: 1.2rem;
  transition: color 0.2s ease;
}

.popup-toggle-button .fa-toggle-on {
  color: #86efac;
}

.popup-toggle-button .fa-toggle-off {
  color: #fca5a5;
}

.select2-container--default .select2-selection--multiple .select2-selection__clear {
  margin-top: 0px;
}

.select2-container .select2-selection--multiple .select2-selection__clear{
  color: #c8c8c8;
}

@media screen and (max-width: 1260px) {
  .footer-box {
    height: 4em;
  }

  .footer-box-big {
    height: 4em;
  }

  .container {
    grid-template-columns: 25em 1fr;
    padding: 10px 20px 20px;
  }

  .menu {
    margin: 25px 10px 12px;
  }

  .sidebar-right {
    margin: 20px 12px 12px;
  }

  .topbar {
    padding: 25px 27px 25px;
  }

  .box.small {
    width: 4.5em;
    height: 4.5em;
  }

  .logo {
    font-size: 2rem;
  }

  .card {
    height: 100%;
    font-size: 1.1rem;
    border-radius: 15px;
  }

  .select2-container--default .select2-selection--single {
    height: 4em;
  }
}

@media screen and (max-height: 880px) {
  .container {
    grid-template-rows: auto 12px 1fr auto;
  }

  .card {
    height: 100%;
  }
}

@media screen and (max-width: 1024px) {
  .container {
    grid-template-columns: 20em 1fr;
    padding: 10px 20px 20px;
  }

  .menu {
    margin: 20px 8px 15px;
  }

  .sidebar-right {
    margin: 15px 10px 10px;
  }

  .topbar {
    padding: 20px 24px 28px;
  }

  .box.small {
    width: 4em;
    height: 4em;
  }

  .logo {
    font-size: 1.8rem;
  }

  .card {
    height: 100%;
    font-size: 1rem;
  }

  .select2-container--default .select2-selection--single {
    height: 3.5em;
  }
}

@media screen and (max-width: 900px) {
  .mobile-header-bg {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 198px; /* Increased to account for menu top spacing */
    background-color: var(--bg-color);
    z-index: 997;
    pointer-events: none;
  }

  .container {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto 1fr auto;
    padding: 20px;
    position: relative;
    padding-bottom: 0;
    height: 100vh;
    width: 100%;
    max-width: 100%;
    /* Allow the main area to handle vertical scrolling on mobile */
    overflow: visible;
  }

  .menu-toggle {
    display: block;
  }
  .menu {
    position: fixed;
    top: 20px;
    left: 0;
    right: 0;
    width: calc(100% - 40px); /* Leave 20px on each side */
    max-width: 100vw;
    box-sizing: border-box;
    z-index: 1000;
    padding: 10px 15px;
    flex-direction: column;
    align-items: stretch;
    transition: all 0.3s ease;
    max-height: 65px;
    overflow: hidden;
    background-color: var(--card-bg);
    overflow-x: hidden;
    margin: 0 20px; /* Add horizontal margin */
    border-radius: 12px; /* Add border radius for better look */
    gap: 5px;
  }

  .menu.show-buttons {
    max-height: 100vh;
    padding: 15px;
    height: auto;
    overflow-y: auto;
  }

  .menu-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 8px;
    margin-bottom: 10px;
  }

  .menu-text {
    font-size: 1.8rem;
    font-weight: 800;
    padding-bottom: 2px;
    max-width: calc(100% - 50px); /* Increased space for hamburger */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1; /* Take remaining space */
    text-align: left;
  }

  .menu-toggle {
    display: block !important;
    color: var(--text-color);
    font-size: 1.5rem;
    padding: 5px;
    padding-bottom: 2px;
    margin-right: -5px;
  }

  .menu-button {
    display: none;
    padding: 22px;
    margin: 5px 0;
    border-radius: 12px;
    font-size: 1.1rem;
    width: 100%; /* Ensure buttons take full width */
    box-sizing: border-box; /* Include padding in width calculation */
  }

  .menu.show-buttons .menu-button {
    display: block;
    animation: fadeIn 0.3s ease;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .topbar {
    position: fixed;
    top: 103px;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100vw;
    z-index: 999;
    background-color: var(--bg-color) !important;
    padding: 15px 20px;
    gap: 15px;
    height: 65px; /* Fixed height for consistency */
  }

  .divider {
    position: fixed;
    top: 188px; /* Adjusted to be below topbar */
    left: 0;
    right: 0;
    width: calc(100% - 40px); /* Match menu width */
    max-width: 100vw;
    z-index: 998;
    margin: 0 20px; /* Match menu margins */
    background-color: var(--card-bg);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
    border-radius: 20px;
  }

  .footer-divider {
    display: block;
    position: fixed;
    bottom: 90px;
    left: 0;
    right: 0;
    width: calc(100% - 40px);
    max-width: 100vw;
    margin: 0 20px;
    background-color: var(--card-bg);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
    border-radius: 20px;
  }

  .main {
    grid-row: 4;
    grid-column: 1;
    padding: 0em 20px 20px;
    margin-top: 12em;
    /* Keep main as layout container only — do not scroll the whole page. */
    overflow: visible;
    height: calc(100vh - 195px - 100px); /* preserve sizing for layout */
    margin-bottom: 0;
    position: relative;
  }

  .card-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    gap: 15px !important;
    max-height: none !important;
    height: auto !important;
    padding: 5px !important;
    /* Make the cards area the only scroll container on mobile */
    max-height: calc(100vh - 220px) !important; /* room for header/menu/footer */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  .card {
    height: 60px !important;
    flex-direction: row !important;
    gap: 10px !important;
    padding: 0 15px !important;
    justify-content: flex-start !important;
    display: flex !important;
    align-items: center !important;
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  
  .card + .card-icon {
    display: none !important;
  }

  .sidebar-right {
    display: none;
  }

  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--bg-color) !important;
    padding: 13px 21px 13px;
    z-index: 100;
    gap: 20px;
    grid-template-columns: 1fr auto;
  }

  .logo {
    font-size: 1.6rem;
    flex: 0 1 auto;
    min-width: 0;
  }

  .box.small {
    width: 3.2em;
    height: 3.2em;
    border-radius: 12px;
  }

  .select2-container--default .select2-selection--single {
    height: 3em;
    border-radius: 12px;
  }

  .mob-select-wrapper {
    gap: 20px;
  }

  .select-with-images {
    max-width: none;
    min-width: 80px;
  }

  .card i {
    display: none !important;
  }

  .card span.card-text {
    opacity: 1 !important;
    position: static !important;
    font-size: 1.1rem;
  }
  
  .question-icon {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 20px !important;
    height: 20px !important;
    font-size: 12px !important;
  }
}

/* Media query adicional para pantallas muy pequeñas */
@media screen and (max-width: 480px) {
  .card-grid {
    gap: 10px !important;
  }
  
  .card {
    height: 50px !important;
    padding: 0 12px !important;
  }
  
  .card::before {
    width: 50px !important;
    height: 50px !important;
    font-size: 1.2rem !important;
  }
  
  .card span.card-text {
    font-size: 1rem !important;
  }
}

:root {
  --bg-color: #fff;
  --text-color: #222;
  --card-bg: #ffffff;
  --menu-button-bg: #fff;
  --menu-button-hover: #bbb;
  --popup-bg: #fff;
  --popup-header-bg: #333;
  --popup-text-color: #333;
  --popup-accent: #555;
  --popup-border-radius: 1.5rem;
  --popup-overlay-bg: rgba(0, 0, 0, 0.4);
  --popup-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  --popup-focus-shadow: 0 0 1 3px rgba(51, 51, 51, 0.2);
  --input-bg: #ffffff;
  --saved-item-bg: #ffffff;
  --saved-item-border: #e5e7eb;
  --saved-item-edit-bg: rgba(134,238,172,0.15);
  --saved-item-edit-border: #86efac;
}

[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #fff;
  --card-bg: #333;
  --menu-button-bg: #444;
  --menu-button-hover: #555;
  --popup-bg: #1a1a1a;
  --popup-header-bg: #333;
  --popup-text-color: #fff;
  --popup-accent: #ccc;
  --input-bg: #2a2a2a;
  --saved-item-bg: #2b2b2b;
  --saved-item-border: #444;
  --saved-item-edit-bg: rgba(34,197,94,0.12);
  --saved-item-edit-border: #16a34a;

  & .select2-container--default .select2-selection--single {
    background-color: var(--card-bg);
    color: var(--text-color);
  }

  & .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-color);
  }

  & .select2-dropdown {
    background-color: var(--card-bg);
    border-color: #444;
  }

  & .select2-search__field {
    background-color: var(--input-bg);
    color: var(--text-color);
  }

  & .select2-results__option {
    color: var(--text-color);
  }

  & .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #444;
    color: white;
  }

  & .popup-select {
    background-color: var(--card-bg);
    color: var(--text-color);
  }
}

/* Saved list item common styles */
.saved-list-item,
.saved-loot-item {
  background: var(--saved-item-bg);
  border: 1px solid var(--saved-item-border);
  color: var(--text-color);
  padding: 8px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.saved-list-item .left,
.saved-loot-item > div:first-child {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Truncation and flex behavior for saved commands list */
.saved-thumb { flex: 0 0 auto; width: 38px; height: 38px; }
.saved-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.saved-btns { flex: 0 0 auto; display: flex; gap: 12px; align-items: center; }
.saved-btns .saved-action-btn { flex-shrink: 0; }

.saved-list-item.editing,
.saved-loot-item.editing {
  background: var(--saved-item-edit-bg);
  border-color: var(--saved-item-edit-border);
  box-shadow: 0 8px 22px rgba(0,0,0,0.12);
}

/* Selection highlight handled by class (avoid inline styles) so it persists
   across theme toggles and DOM updates. */
.saved-list-item.selected,
.saved-loot-item.selected {
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  transform: translateY(-2px);
}

[data-theme="dark"] .saved-list-item.selected,
[data-theme="dark"] .saved-loot-item.selected {
  box-shadow: 0 8px 22px rgba(0,0,0,0.45);
}

/* Make editing state more visible in dark theme (green glow) */
[data-theme="dark"] .saved-list-item.editing,
[data-theme="dark"] .saved-loot-item.editing {
  box-shadow: 0 8px 30px rgba(16,185,129,0.10), 0 0 0 3px rgba(16,185,129,0.06);
  border-color: var(--saved-item-edit-border);
}

.saved-edit-btn { background: #f3f4f6; color: var(--text-color); border: 1px solid #e5e7eb; }
.saved-delete-btn { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.saved-update-btn { background: linear-gradient(180deg, #4ADE80, #22C55E) !important; color: #065f46; border: 1px solid #86efac; }

/* Ensure update button matches edit/delete sizing and interactions */
.saved-update-btn {
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
}

/* Pressed state for edit/delete/update buttons inside loot tags saved list */
.loot-tags-saved-list .saved-edit-btn.pressed,
.loot-tags-saved-list .saved-edit-btn:active,
.loot-tags-saved-list .saved-delete-btn.pressed,
.loot-tags-saved-list .saved-delete-btn:active,
.loot-tags-saved-list .saved-update-btn.pressed,
.loot-tags-saved-list .saved-update-btn:active {
  transform: translateY(1px) scale(0.98) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

[data-theme="dark"] .saved-edit-btn { background: #3b3b3b; color: var(--text-color); border: 1px solid #4b4b4b; }
[data-theme="dark"] .saved-delete-btn { background: rgba(220,38,38,0.12); color: #fecaca; border: 1px solid rgba(220,38,38,0.18); }
[data-theme="dark"] .saved-update-btn { background: linear-gradient(180deg, #4ADE80, #22C55E) !important; color: #fecaca; border: none; }


::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg-color);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background: var(--card-bg);
  border-radius: 5px;
  border: 2px solid var(--bg-color);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--menu-button-hover);
}

* {
  scrollbar-width: none;
  scrollbar-color: var(--card-bg) var(--bg-color);
}

.popup-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--popup-overlay-bg);
  backdrop-filter: blur(4px);
  z-index: 1001;
  justify-content: center;
  align-items: center;
}

.popup-window {
  background: var(--popup-bg);
  padding: 0;
  border-radius: var(--popup-border-radius);
  width: clamp(300px, 90%, 500px);
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: var(--popup-shadow);
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.popup-overlay.show,
.saved-modal.show {
  display: flex;
}

.popup-header {
  background: var(--popup-header-bg);
  padding: 1.5rem 2.5rem;
  border-top-left-radius: var(--popup-border-radius);
  border-top-right-radius: var(--popup-border-radius);
}

.popup-header h2 {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
}

.popup-overlay.show .popup-window {
  transform: translateY(0);
  opacity: 1;
}

.popup-input-group {
  display: flex;
  gap: 0.8rem;
  align-items: flex-end;
  margin-bottom: 25px;
}
/* Baby modal: stack select on top, time+status in second row */
#babyPopup .popup-input-group { display: block; }
#babyPopup .baby-row { display: flex; gap: 0.8rem; align-items: center; margin-top: 6px; }
#babyPopup .baby-row .popup-input-wrapper { flex: 1; margin-top: 0; }
#babyPopup .baby-status-wrapper .popup-button { height: 40px; width: 56px; display:flex; align-items:center; justify-content:center; }

/* Save button press animation */
.popup-button.save-button.pressed,
.popup-button.save-button:active {
  transform: translateY(1px) scale(0.986);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.12);
}

/* Expanded Select2 inside Loot Tags sidebar */
#sidebarItemSelect + .select2-container.sidebar-expanded .select2-selection {
  height: 60px !important;
  background-color: var(--menu-button-bg);
  border: none !important;
  border-radius: 15px 15px 0px 0px !important;
  display: flex !important;
  align-items: center !important;
}

.popup-input-wrapper {
  flex: 1;
  margin-top: 10px;
}

.popup-input {
  width: 100%;
  height: 2.8rem;
  padding: 0.8rem 1.2rem;
  border-radius: 8px;
  border: 1px solid #b2b2b2;
  font-size: 1.1rem;
  color: var(--popup-text-color);
  background-color: var(--input-bg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.popup-input:focus {
  outline: none;
  border-color: var(--popup-header-bg);
  box-shadow: var(--popup-focus-shadow);
}

/* Loot Tags inputs: use slimmer border on focus and match name-modal focus style */
#lootTagsPopup .sidebar-input:focus,
#lootTagsPopup .sidebar-select:focus,
#lootTagsPopup input.sidebar-input:focus {
  outline: none;
  border: 1px solid var(--popup-header-bg) !important;
  box-shadow: var(--popup-focus-shadow) !important;
}

.popup-button {
  background: #fca5a5;
  border: 2px solid #ed7c7c;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #991b1b;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Pressed state for sidebar buttons inside loot tags */
.sidebar-button.pressed,
.sidebar-button:active {
  transform: translateY(1px) scale(0.98) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

/* Unified status button classes - use these instead of inline .css(...) in JS */
.status-button {
  /* keep sizing and base look from .popup-button but allow it to be applied to other elements */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.12s ease;
}

.status-saved {
  background-color: #86efac !important;
  color: #166534 !important;
  border: 2px solid rgb(45 165 91) !important;
}

.status-not-saved {
  background-color: #fca5a5 !important;
  color: #991b1b !important;
  border: 2px solid #ed7c7c !important;
}

/* Dark-theme: ensure disabled inputs have clear styling */
[data-theme="dark"] input:disabled,
[data-theme="dark"] textarea:disabled,
[data-theme="dark"] select:disabled,
[data-theme="dark"] .popup-input:disabled,
[data-theme="dark"] .popup-select:disabled,
[data-theme="dark"] .select2-container--default .select2-selection--single[aria-disabled="true"] {
  background-color: #222427;
  color: #9aa4af;
  border-color: #3a3a3a;
  opacity: 1; /* keep readable */
}

/* Give Select2's arrow a bit more breathing room on the right */
.select2-container--default .select2-selection--single .select2-selection__arrow {
  right: 14px; /* a little extra space from the right edge */
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-right: 40px; /* reserve space for the arrow */
}


[data-theme="dark"] .settings-card {
  border: 2px solid #444 !important;
  color: #eee !important;
}

.popup-button#statusButton.saved {
  background: #86efac;
  color: #166534;
  border: 2px solid #3db56a;
}

.popup-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

.popup-button:active {
  transform: translateY(0);
}

.popup-button.save-button {
  background: #7dbbff;
  color: white;
}

/* Styles for saved list action buttons */
.saved-action-btn {
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  cursor: pointer;
}
.saved-action-btn:hover {
  transform: translateY(-3px) scale(1.06);
  filter: brightness(1.03);
}
.saved-action-btn.pressed {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

/* Ensure saved list spacing and appearance */
.saved-modal-list ul { padding: 0; margin: 0; }
.saved-modal-list li { list-style: none; }

/* Scroll behaviour and size for saved list modal */
.saved-modal-list {
  max-height: 60vh; /* allow room for modal header/footer */
  overflow-y: auto;
  padding-right: 8px; /* space for scrollbar */
}

.saved-modal-list::-webkit-scrollbar {
  width: 8px;
}
.saved-modal-list::-webkit-scrollbar-thumb {
  background: var(--menu-button-bg);
  border-radius: 8px;
}

/* Specific colors for action buttons */
.saved-copy-btn {
  background: linear-gradient(180deg,#60A5FA,#3B82F6) !important;
  color: #fff !important;
  border-radius: 10px !important;
}
.saved-edit-btn {
  background: linear-gradient(180deg,#FBBF24,#F59E0B) !important;
  color: #1f2937 !important;
  border-radius: 10px !important;
}
.saved-delete-btn {
  background: linear-gradient(180deg,#F87171,#EF4444) !important;
  color: #fff !important;
  border-radius: 10px !important;
}

/* Hover and press visual polish for action buttons */
.saved-copy-btn:hover, .saved-edit-btn:hover, .saved-delete-btn:hover {
  transform: translateY(-4px) scale(1.07) !important;
  box-shadow: 0 10px 20px rgba(0,0,0,0.14) !important;
}
.saved-copy-btn.pressed, .saved-edit-btn.pressed, .saved-delete-btn.pressed {
  transform: translateY(1px) scale(0.96) !important;
}

/* Item hover and click animation */
.saved-modal-content li {
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.saved-modal-content li:hover {
  transform: translateY(-3px) scale(1.005);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
.saved-modal-content li:active {
  transform: translateY(1px) scale(0.98);
}

/* Dark mode adjustments for saved items and language modal buttons */
[data-theme="dark"] .saved-modal-content li {
  background: #252525 !important;
  color: #fff !important;
}
[data-theme="dark"] .saved-copy-btn { box-shadow: 0 3px 8px rgba(59,130,246,0.12); }
[data-theme="dark"] .saved-edit-btn { box-shadow: 0 3px 8px rgba(245,158,11,0.12); }
[data-theme="dark"] .saved-delete-btn { box-shadow: 0 3px 8px rgba(239,68,68,0.12); }

/* Language modal button border adapt to dark */
[data-theme="dark"] .language-btn { border-color: #444 !important; background: #333 !important; color: #eee !important; }

/* Make select2 for variant and color smaller to match other inputs */
.select2-variant-container .select2-selection,
.select2-color-container .select2-selection {
  height: 36px !important;
  line-height: 36px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-size: 0.95rem;
}
.select2-variant-container .select2-selection__rendered,
.select2-color-container .select2-selection__rendered {
  line-height: 36px !important;
}
.select2-variant-container .select2-selection__arrow,
.select2-color-container .select2-selection__arrow {
  height: 36px !important;
  line-height: 36px !important;
}

/* Visual for saved items disabled during editing */
.saved-loot-item.disabled-editing,
.saved-list-item.disabled-editing {
  opacity: 0.48 !important;
  filter: grayscale(60%) !important;
  cursor: not-allowed !important;
}
.saved-loot-item.disabled-editing .actions,
.saved-list-item.disabled-editing .actions {
  opacity: 0.6 !important;
}

/* Disabled options inside the Loot Tags sidebar Select2 dropdown */
#lootTagsPopup .select2-container .select2-results__option[aria-disabled="true"],
.sidebar-right .select2-container .select2-results__option[aria-disabled="true"] {
  color: #7a7a7a !important;
  text-decoration: line-through !important;
  opacity: 0.9 !important;
  background: transparent !important;
}
#lootTagsPopup .select2-container .select2-results__option[aria-disabled="true"] img,
.sidebar-right .select2-container .select2-results__option[aria-disabled="true"] img {
  filter: grayscale(100%) brightness(0.85) !important;
  opacity: 0.75 !important;
}

/* Dark theme adjustments for disabled Select2 options inside Loot Tags */
[data-theme="dark"] #lootTagsPopup .select2-container .select2-results__option[aria-disabled="true"],
[data-theme="dark"] .sidebar-right .select2-container .select2-results__option[aria-disabled="true"] {
  color: #cfcfcf !important;
  text-decoration: line-through !important;
  opacity: 0.95 !important;
}
[data-theme="dark"] #lootTagsPopup .select2-container .select2-results__option[aria-disabled="true"] img,
[data-theme="dark"] .sidebar-right .select2-container .select2-results__option[aria-disabled="true"] img {
  filter: grayscale(100%) brightness(0.7) !important;
  opacity: 0.8 !important;
}

.saved-list-item {
  background: var(--card-bg);
  color: var(--text-color);
  border: 2px solid #dadada;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}

[data-theme="dark"] .saved-list-item {
  background: #333 !important;
  color: #fff !important;
  border-color: #444 !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.35) !important;
}

/* Ensure name text inside the item doesn't get overridden by inline styles */
.saved-list-item > div {
  color: inherit;
}

/* Truncate saved item name after ~13 characters using ch unit and ellipsis */
.saved-list-item > div:nth-child(2) {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0; /* allow flex children to shrink */
}

/* Ensure saved item name is left-aligned and buttons remain on the right */
.saved-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Ensure edit border remains visible in dark theme (match light mode) */
[data-theme="dark"] .saved-list-item.editing,
[data-theme="dark"] .saved-loot-item.editing {
  border-color: var(--saved-item-edit-border) !important;
}

/* Ensure edit border remains visible when switching back to light theme.
   The base .saved-list-item rule appears later and may override earlier
   editing rules; force the edit styling with higher specificity and !important. */
.saved-list-item.editing,
.saved-loot-item.editing {
  background: var(--saved-item-edit-bg) !important;
  border-color: var(--saved-item-edit-border) !important;
}

/* Saved Create Modal: make height fit content and improve button styles */
#savedCreateModal .popup-window {
  width: clamp(320px, 90%, 460px);
  max-height: 85vh; /* still allow scrolling if content is large */
  height: auto; /* adapt to form height */
  overflow: visible; /* let inner content control overflow */
  padding: 0; /* header/content define spacing */
}

#savedCreateModal .popup-content {
  padding: 1.25rem 1.5rem; /* tighter padding to match compact form */
  border-radius: 1.5rem;
}

/* Improve appearance of the save/cancel buttons inside create modal */
#savedCreateModal .saved-modal-actions .popup-button {
  padding: 10px 14px;
  border-radius: 10px;
  min-width: 86px;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s;
}

#savedCreateModal .saved-modal-actions .popup-button.save-button {
  background-color: #86efac !important;
  color: #166534 !important;
  border: 2px solid rgb(45 165 91) !important;
}

#savedCreateModal .saved-modal-actions .popup-button.save-button:hover {
  transform: translateY(-2px);
}

#savedCreateModal .saved-modal-actions .popup-button:not(.save-button) {
  background: #fff;
  color: #333;
  border: 1px solid #e5e7eb;
}

#savedCreateModal .saved-modal-actions .popup-button:not(.save-button):hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}

/* Ensure saved action buttons have the requested padding if inline styles exist */
.saved-action-btn {
  padding: 11px 15px !important;
}

.popup-input-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--popup-accent);
  font-size: 1rem;
}

.popup-content {
  padding: 2.5rem;
  background: var(--popup-bg);
}

.popup-close {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.popup-close:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.select2-container--default .select2-dropdown {
  animation: selectDropdown 0.2s ease;
  transform-origin: top;
}

@keyframes selectDropdown {
  from {
    opacity: 0;
    transform: scaleY(0.7);
  }
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

.popup-description {
  font-size: 1.1rem;
  color: var(--text-color);
  margin-bottom: 35px;
  margin-top: 0px;
}

/* Responsive: compact saved commands modal on small screens */
@media (max-width: 600px) {
  .saved-list-item {
    padding: 8px 10px !important;
    gap: 8px !important;
  }
  .saved-list-item img,
  .saved-list-item span[role="img"] {
    width: 28px !important;
    height: 28px !important;
    margin-right: 8px !important;
  }
  .saved-list-item div[style] {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    gap: 13px !important;
  }
  .saved-action-btn {
    padding: 8px 10px !important;
    border-radius: 8px !important;
    gap: 8px !important;
  }
  .saved-action-btn i { font-size: 0.95rem !important; }

  .popup-content {
    padding: 10px;
  }
}

@media (max-width: 400px) {
  .saved-list-item {
    padding: 8px 10px !important;
    gap: 8px !important;
  }
  .saved-list-item img,
  .saved-list-item span[role="img"] {
    width: 28px !important;
    height: 28px !important;
    margin-right: 8px !important;
  }
  .saved-list-item div[style] {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    gap: 8px !important;
  }
  .saved-action-btn {
    padding: 8px 10px !important;
    border-radius: 8px !important;
    gap: 8px !important;
  }
  .saved-action-btn i { font-size: 0.95rem !important; }

  .popup-content {
    padding: 10px;
  }
}

/* Compact adjustments for Loot Tags modal on very small screens */
@media (max-width: 400px) {
  .loot-tags-window .popup-window,
  #lootTagsPopup .popup-window {
    width: 94vw !important;
    max-width: 380px !important;
    margin: 0 auto !important;
  }
  .loot-tags-window .popup-content,
  #lootTagsPopup .popup-content {
    padding: 10px !important;
  }
  .loot-tags-window .loot-tags-header,
  #lootTagsPopup .loot-tags-header {
    gap: 8px !important;
    flex-direction: row;
    align-items: center;
  }
  .loot-tags-window .loot-tags-container,
  #lootTagsPopup .loot-tags-container {
    padding: 5px;
    gap: 8px !important;
    max-height: 45vh !important;
    overflow-y: auto !important;
  }
  .loot-tags-window .sidebar-input,
  #lootTagsPopup .sidebar-input,
  #lootTagsPopup .sidebar-select {
    font-size: 0.95rem !important;
  }
}

/* Notifications: on small screens stack top-down and use full width */
@media (max-width: 600px) {
  .notif-container {
    left: 12px !important;
    right: 12px !important;
    top: 12px !important;
    align-items: center !important;
  }
  .notif-container { align-items: center; }
  .notif-container .notification {
    width: calc(100% - 24px) !important;
    max-width: none !important;
    min-width: 0 !important;
    border-radius: 12px;
    align-self: center !important;
  }
  .notif-container { flex-direction: column; }
}

.label-text {
  font-size: 1rem;
  font-weight: 600;
  color: var(--popup-accent);
}

#itemSelect .select2-container .select2-selection--single {
  height: 2.8rem;
  border-radius: 8px;
  background-color: var(--input-bg);
  border: 1px solid #ccc;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#itemSelect .select2-container .select2-selection__rendered {
  line-height: 2.5rem;
  padding-left: 0.8rem;
  color: var(--popup-text-color);
}

#itemSelect .select2-container .select2-selection__arrow {
  height: 100%;
  top: 0;
  right: 14px;
}

#itemSelect .select2-container .select2-selection__rendered img {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-right: 8px;
  border-radius: 4px;
}

.popup-input-wrapper .select2-container .select2-selection--single {
  height: 2.8em;
  display: flex;
  align-items: center;
  border: 1px solid #b2b2b2;
}

.popup-input-wrapper {
  display: flex;
  align-items: center;
  min-width: 0;
  flex-wrap: wrap;
}
.popup-input-wrapper .select2-container {
  flex: 1 1 auto;
  min-width: 0; 
}
.popup-input-wrapper .select2-selection__rendered {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  max-width: 100%;
}
.popup-input-wrapper .select2-selection__rendered img {
  width: 25px;
  height: 25px;
  vertical-align: middle;
  margin-right: 10px;
  margin-bottom: 4px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.language-buttons {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}

.language-btn {
  padding: 0.8rem 1.2rem;
  border: 2px solid #dadada;
  border-radius: 8px;
  background-color: var(--card-bg);
  color: var(--text-color);
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  position: relative;
  padding-left: 45px;
}

.language-btn::before {
  content: "";
  position: absolute;
  left: 1rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--text-color);
  transition: all 0.2s ease;
}

.language-btn.active::before {
  background-color: #22c55e;
  border-color: #22c55e;
}

.language-btn img {
  width: 30px;
  height: 24px;
  border-radius: 4px;
  object-fit: cover;
}

.card {
  position: relative;
}

.card-lock-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
  border-radius: 10px;
  pointer-events: all;
  cursor: not-allowed;
}

.card.locked {
  pointer-events: none;
}

.main {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.card-page {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 20px;
  margin: 0 auto;
  width: 100%;
  height: 100%
}

/* Keep only the first 9 cards (and their paired .card-icon) visible in the grid.
   The DOM uses pairs (card, card-icon) for each logical card; that's 18 children for 9 cards.
   Hide any grid children after the 18th so the visible area is a 3x3 square. */
.card-grid > *:nth-child(n+19) {
  display: none;
}

.card-page.active {
  display: grid;
}

@media screen and (max-width: 900px) {
  .card-page {
    grid-template-columns: repeat(2, 1fr) !important; /* Forzar 2 columnas */
    display: grid !important; /* Mostrar todas las páginas */
    margin-bottom: 20px;
  }

  .card {
    height: 80px; /* Altura fija para cards */
  }

  .card-icon {
    height: 60px; /* Card icon más pequeño */
    width: 60px;
  }

  .main {
    display: flex;
    flex-direction: column;
    gap: 0; /* Eliminar gap entre páginas */
  }

  .menu-button .menu-icon {
    align-items: normal;
  }
}

/* Asegurar que el grid de 3 columnas solo aplique en desktop */
@media screen and (min-width: 901px) {
  .card-page {
    grid-template-columns: repeat(3, 1fr);
  }

  #page2:not(.active) {
    display: none;
  }
}

.sidebar-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}

.items-container {
  flex: 1;
  overflow-y: auto;
  padding: 5px;
}

.sidebar-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 15px;
}

.sidebar-item label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-color);
}

.toggle-button {
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  background-color: var(--menu-button-bg);
  color: var(--text-color);
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-button i {
  font-size: 1.1rem;
}

.toggle-button .fa-toggle-on {
  color: #86efac;
}

.toggle-button .fa-toggle-off {
  color: #fca5a5;
}

.sidebar-select {
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  background-color: var(--menu-button-bg);
  color: var(--text-color);
  font-size: 0.9rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

input[type="color"].sidebar-input {
  height: 35px;
  padding: 2px;
}

/* Estilos específicos para el modal de Loot Tags */
.loot-tags-window {
  width: clamp(400px, 90%, 600px);
  max-height: 80vh;
}

.loot-tags-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.loot-tags-header .add-item-header {
  width: 60px;
  height: 60px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--input-bg) !important;
  border-radius: 15px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
  border: 1px solid #b2b2b2
}

.loot-tags-header .add-item-header:hover {
  transform: scale(1.05);
  background-color: var(--menu-button-hover);
}

.loot-tags-header .add-item-header:active {
  transform: scale(0.95);
}

.loot-tags-header .add-item-header i {
  font-size: 1.5rem;
  color: var(--text-color);
}

.loot-tags-buttons {
  display: grid;
  gap: 10px;
  margin-bottom: 20px;
}

.loot-tags-buttons .sidebar-button {
  padding: 17px;
  border: none;
  border-radius: 12px;
  background-color: var(--menu-button-bg);
  color: var(--text-color);
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

.loot-tags-buttons .sidebar-button:hover {
  transform: scale(1.05);
  background-color: var(--menu-button-hover);
}

.loot-tags-buttons .sidebar-button i {
  font-size: 1.2rem;
}

.loot-tags-buttons .sidebar-button.save {
  background-color: #86efac;
  color: #166534;
      border: 2px solid rgb(45 165 91) !important;
}

.loot-tags-buttons .sidebar-button.delete {
  background-color: #fca5a5;
  color: #991b1b;
}

.loot-tags-buttons:focus {
  outline: none;
  border-color: var(--popup-header-bg);
  box-shadow: var(--popup-focus-shadow);
}

.loot-tags-divider {
  width: 100%;
  height: 5px;
  background-color: var(--card-bg);
  margin: 20px 0;
  border-radius: 200px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* When compact, hide the form inputs (details) and show only header/buttons/saved list */
.loot-tags-window.loot-compact .loot-tags-container{
  display: none !important;
}

.saved-loot-item .popup-button.small{ padding:6px 8px; font-size:0.9rem }

/* Remove inner scrollbars for inputs; popup/window provides general scrolling */
.loot-tags-item { max-width: 100%; }

/* Styling for item currently being edited */
.loot-tags-saved-list .saved-loot-item.editing {
  background-color: rgba(134,238,172,0.15);
  border-color: #86efac;
}

/* Stronger visible editing indicator in dark theme for loot-tags saved items */
[data-theme="dark"] .loot-tags-saved-list .saved-loot-item.editing {
  background-color: rgba(16,185,129,0.14) !important;
  border-color: #10b981 !important;
}

.loot-tags-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 15px;
}

.loot-tags-item label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--popup-text-color);
}

.loot-tags-item .sidebar-input {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 12px;
  background-color: var(--input-bg);
  color: var(--popup-text-color);
  font-size: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  border: 1px solid #ccc;
}

.loot-tags-item .sidebar-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--popup-header-bg);
  border-color: var(--popup-header-bg);
}

#lootColorSelect {
  height: 45px;
}

.loot-tags-item .toggle-button {
  padding: 12px;
  border: none;
  border-radius: 12px;
  background-color: var(--input-bg);
  color: var(--popup-text-color);
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;

/* Visually dim disabled options in Select2 results (robust against re-inits) */
.select2-results__option[aria-disabled="true"] {
  opacity: 0.45;
  filter: grayscale(100%);
  pointer-events: none;
}

.select2-container--default .select2-selection__choice[aria-disabled="true"] {
  opacity: 0.5;
}

/* Hide images in the selected value for the mobType Select2 specifically (multiple selector variants) */
#select2-mobType-container img,
[id^="select2-mobType"] img,
select#mobType + .select2-container .select2-selection__rendered img,
select#mobType ~ .select2-container .select2-selection__rendered img,
.select2-container .select2-selection__rendered[id^="select2-mobType"] img {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  border: 1px solid #ccc;
}

.loot-tags-item .toggle-button:hover {
  background-color: var(--menu-button-hover);
}

.loot-tags-item .toggle-button i {
  font-size: 1.1rem;
}

.loot-tags-item .toggle-button .fa-toggle-on {
  color: #86efac;
}

.loot-tags-item .toggle-button .fa-toggle-off {
  color: #fca5a5;
}

.loot-tags-item .sidebar-select {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 12px;
  background-color: var(--input-bg);
  color: var(--popup-text-color);
  font-size: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  border: 1px solid #ccc;
}

.loot-tags-item input[type="color"].sidebar-input {
  height: 35px;
  padding: 2px;
}

#sidebarItemSelect + .select2-container {
  flex: 1;
}

#sidebarItemSelect + .select2-container .select2-selection {
  height: 60px !important;
  background-color: var(--menu-button-bg);
  border: none;
  border-radius: 15px;
  display: flex;
  align-items: center;
}

.sidebar-small-select2 .select2-selection--single {
  min-height: 36px !important;
  height: 36px !important;
  font-size: 0.95rem !important;
  padding: 0.2rem 0.7rem !important;
}

.sidebar-small-select2 .select2-selection__rendered {
  font-size: 0.95rem !important;
  line-height: 1.7rem !important;
  padding-left: 0.3rem !important;
}

.sidebar-small-select2 .select2-selection__arrow {
  height: 100% !important;
  top: 0 !important;
  left: 44px !important;
}

.sidebar-small-select2 .select2-dropdown,
.sidebar-small-select2 .select2-results__option {
  font-size: 0.95rem !important;
  min-height: 30px !important;
  padding: 6px 10px !important;
}

.sidebar-small-select2 .select2-results__option img {
  width: 18px !important;
  height: 18px !important;
  margin-right: 6px !important;
  border-radius: 4px !important;
}

.sidebar-lock-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.1);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
  pointer-events: all;
  backdrop-filter: blur(35px);
}

.sidebar-lock-overlay i {
  font-size: 2.5rem;
  color: #000000;
}

[data-theme="dark"] .sidebar-lock-overlay i {
  color: #fff !important;
}

/* Guardados Modal Styles */
.saved-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--popup-overlay-bg);
  z-index: 2000;
  justify-content: center;
  align-items: center;
}

.saved-modal.show {
  display: flex;
}

.saved-modal-window {
  background: none;
  border-radius: var(--popup-border-radius);
  width: 90vw;
  max-width: 700px;
  min-width: 320px;
  margin: 40px 0;
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  box-shadow: var(--popup-shadow);
  overflow: hidden;
}

.saved-modal-header {
  background: var(--popup-header-bg);
  padding: 1.5rem 2.5rem;
  border-top-left-radius: var(--popup-border-radius);
  border-top-right-radius: var(--popup-border-radius);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.saved-modal-header h2 {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
}

.saved-modal-content {
  padding: 2.5rem;
  background: var(--popup-bg);
  flex: 1 1 auto;
  overflow-y: auto;
}

/* (Removed broken/duplicate saved-list-item rules that used an incorrect selector
   or were empty. The proper rules for .saved-list-item live earlier in the file.)
*/

.saved-modal-content ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.saved-modal-content li {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 2px solid #dadada; /* user-requested border for all saved items */
  padding: 10px; /* ensure content has spacing inside the border */
  border-radius: 10px;
  background: var(--popup-bg);
}
.saved-modal-content img {
  flex-shrink: 0;
}

/* Responsive for modal */
@media screen and (max-width: 900px) {
  .saved-modal-window {
    width: 98vw;
    margin: 20px 0;
    max-width: 99vw;
    min-width: 0;
    border-radius: 18px;
  }
  .saved-modal-content {
    padding: 1.2rem;
  }
  .saved-modal-header {
    padding: 1rem 1.2rem;
  }
}

/* FIX: prefer the actual <i> icons on small viewports to avoid pseudo-element collisions
   Some previous rules used ::before with unicode codes which could be applied inconsistently
   when DOM nodes are reordered. Force using the real <i> elements for icons on mobile. */
@media screen and (max-width: 900px) {
  .card::before { content: none !important; }
  .card i { display: inline-flex !important; font-size: 1.4rem !important; margin-right: 12px !important; color: var(--text-color) !important; margin-left: 10px;}
  .card i { transform: none !important; }
}

input:disabled {
  background-color: #d4d4d4;
}

/* Baby modal grid layout */
.popup-window .parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
}

.popup-window .div1 { grid-column: 1 / span 3; }
.popup-window .div2 { grid-column: 4 / 5; display:flex; align-items:center; justify-content:flex-end; margin-top:38px; margin-left: 6px;}
.popup-window .div3 { grid-column: 1 / -1; grid-row: 2; margin-right: -57px;}
.popup-window #babyRow { display: none; }
.popup-window #babyRow.show { display: block; }
.popup-window .popup-input-wrapper { width: 100%; }
.popup-window .popup-select, .popup-window .popup-input, .popup-window input[type="number"] { width: 100%; box-sizing: border-box; }

/* Settings card decorative and improved button styles (minimal & elegant) */
.settings-window .settings-cards { display:flex; gap:1rem; align-items:stretch; flex-wrap: wrap;}
.settings-card{ position:relative; flex:1; display:flex; justify-content:space-between; align-items:center; background:var(--card-bg); border:2px solid #dadada; padding:12px; border-radius:12px; box-shadow:0 2px 4px rgba(0, 0, 0, 0.1); overflow:visible }
.settings-card > * { position:relative; z-index:1 }
.settings-card .card-left{ display:flex; gap:12px; align-items:center; flex: 1 1 auto; min-width: 0; }
.settings-card .card-actions{ display:flex; align-items:center; justify-content:flex-end; gap:0.6rem; flex: 0 0 auto; }
.settings-card .card-icon{ width:48px; height:48px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg, rgba(0,0,0,0.03), transparent); color:var(--text-color); font-size:1.2rem; box-shadow: none !important; }
/* Align the card text vertically and force left alignment so title/desc look
  consistent and centered next to the icon/button. Remove shadows from icons. */
.settings-card .card-body { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.settings-card .card-body .card-title{ font-weight:700; font-size:1rem; margin: 0 0 4px 0; }
.settings-card .card-body .card-desc{ font-size:0.9rem; color:var(--popup-accent); margin: 0; }
.settings-card .card-actions{ display:flex; align-items:center; justify-content:flex-end; gap:0.6rem; flex: 0 0 auto; }
/* Ensure icon box is fixed size and aligned to the left edge of the card-left area */
.settings-card .card-icon{ flex: 0 0 48px; margin-left: 0; }

/* filename display removed; notifications will be used for import feedback */
.file-input-button{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:8px; background:var(--menu-button-bg); border:1px solid #ddd; cursor:pointer; color:var(--text-color); font-weight:600 }

/* Button styling similar to menu: brighter, pastel gradients and lift on hover */
.settings-card .popup-button{ padding:10px 35px; border-radius:10px; font-weight:800; box-shadow:0 8px 22px rgba(0,0,0,0.12); transition:transform 0.15s ease, box-shadow 0.15s ease }
.settings-card .popup-button.save-button{ background:linear-gradient(180deg,#fff2e6,#ffd6be); color:#1a1a1a !important; border:1px solid rgba(0,0,0,0.04) !important}
.settings-card .popup-button:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(0,0,0,0.14) }
.settings-card #settingsImportButton{ background:linear-gradient(180deg,#fff2e6,#ffd6be); color:#1a1a1a !important; border:1px solid #e6e6e6 !important}

.health-hearts{ background:var(--input-bg); padding:10px; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,0.08); display:flex; gap:6px; align-items:center; flex-wrap:wrap; min-height:48px; border:1px solid #b2b2b2}
.health-hearts img.heart{ width:20px; height:20px; display:inline-block }
.health-hearts .block-image{ display:inline-block; width:16px; height:16px; }
.health-hearts .more-count{ font-weight:700; color:var(--text-color); border-radius:8px; font-size:12px}

@media (max-width:900px){ .settings-card::before{ display:none } .settings-window .settings-cards{ flex-direction:column } }
/* Notifications UI (Uiverse-like visuals with per-type icons) */
.notif-container { position: fixed; top: 18px; right: 18px; z-index: 99999; display:flex; flex-direction:column; gap:10px; align-items:flex-end; }
.notification { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; width: 320px; padding: 12px; display: flex; flex-direction: row; align-items: center; justify-content: start; background: var(--notif-bg, #fff); border-radius: 8px; box-shadow: 0px 0px 5px -3px #111; transform: translateY(-8px) scale(0.995); opacity: 0; transition: all 220ms ease; gap:12px; }
.notification.show { transform: translateY(0) scale(1); opacity: 1; }
.notification.hide { opacity: 0; transform: translateY(-6px); }

/* Desktop: slide notifications in from the right (horizontal) */
@media (min-width: 901px) {
  .notif-container { top: 18px; right: 18px; left: auto; align-items: flex-end; }
  .notification { transform: translateX(12px) scale(0.995); }
  .notification.show { transform: translateX(0) scale(1); opacity: 1; }
  .notification.hide { opacity: 0; transform: translateX(8px); }
}
.notification .notif__icon { width: 20px; height: 20px; margin-top: 3px; display:flex; align-items:center; justify-content:center; }
.notification .notif__icon .notif__fa { color: #fff; font-size: 18px; }
.notification .notif__title { font-weight: 500; font-size: 14px; color: #fff; flex:1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notification .notif-close { width: 20px; height: 20px; cursor: pointer; margin-left: auto; background: transparent; border: none; padding: 0; display:flex; align-items:center; justify-content:center; color: #fff; }
.notification .notif-close svg { width:16px; height:16px; }

/* Colors per type (use full background color like Uiverse) */
.notification.notif-error { background: #EF665B; }
.notification.notif-success { background: #16a34a; }
.notification.notif-warning { background: #f59e0b; }
.notification.notif-info { background: #3b82f6; }

/* Subtle dark-theme adjustment keeps colored backgrounds readable */
[data-theme="dark"] .notification.notif-info { box-shadow: 0 8px 28px rgba(0,0,0,0.6); }
[data-theme="dark"] .notification.notif-success { box-shadow: 0 8px 28px rgba(0,0,0,0.6); }
[data-theme="dark"] .notification.notif-warning { box-shadow: 0 8px 28px rgba(0,0,0,0.6); }
[data-theme="dark"] .notification.notif-error { box-shadow: 0 8px 28px rgba(0,0,0,0.6); }

/* LootTags Select2: hide images in selection (only show in dropdown) */
#sidebarItemSelect + .select2-container .select2-selection__rendered img {
  display: none !important;
}