.item-icon {
  display: inline-block;
  height: 1em;
  width: 1em;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-right: 0.25em;
}

#tooltip-container {
  position: absolute;
  display: none;
  background-color: #2c2c2c;
  color: #ccc;
  padding: 8px;
  border-radius: 4px;
  z-index: 1000;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  min-width: 200px;
  border: 1px solid #2c2c2c;
}

#tooltip-container table {
  border-collapse: collapse;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: #2c2c2c;
}

#tooltip-container tr {
  border: none;
  background-color: #2c2c2c;
}

#tooltip-container tr:nth-child(odd) {
  background-color: #2c2c2c;
}

#tooltip-container td {
  padding: 2px 6px;
  border: none;
  line-height: 1.2;
  color: #ccc;
  white-space: nowrap;
}

#tooltip-container td:first-child {
  width: 40%;
  white-space: nowrap;
}

#tooltip-container td:last-child {
  width: 60%;
  text-align: left;
  padding-left: 0;
}

#tooltip-container h4 {
  font-size: 16px;
  margin: 0 0 4px 0;
  padding: 0;
  color: #ccc;
  font-weight: bold;
}

#tooltip-container p {
  margin: 0;
  padding: 0;
  color: #ccc;
}

#tooltip-container .item-details {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
}

#back-to-top-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 18px; /* Adjust size as needed */
  cursor: pointer;
  background: none; /* Remove background */
  border: none; /* Remove border */
  outline: none; /* Remove focus outline */
}

body {
  background-color: var(--page-col);
  color: var(--text-col);
  font-family: "Fira Sans", var(--md-text-font);
}

a {
  color: var(--link-col);
}

a:hover {
  color: var(--hover-col);
}

.mode-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 35px; /* Adjust width as needed */
  height: 20px; /* Adjust height as needed */
  background-color: #808080; /* Background color */
  border-radius: 20px; /* Full rounding for pill shape */
  border: solid 2px #000000; /* Add border and adjust thickness */
  cursor: pointer;
  padding: 0;
  transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Add transition for box-shadow */
}

.mode-toggle:focus {
  outline: none; /* Remove focus outline */
}

.toggle-icon {
  position: absolute;
  left: 13px; /* Adjust this value to move emoji horizontally */
  top: -2px; /* Move up by 1px */
  transition: transform 0.3s ease, left 0.3s ease;
}

.mode-toggle.dark .toggle-icon {
  transform: translateX(-14px); /* Increase this value to move emoji further right */
}

.mode-toggle.dark {
  background-color: #f0f0f0; /* Gray background for dark mode */
}

.nav-item {
  display: flex;
  align-items: center; /* Align vertically with other nav items */
}

.request-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 30px;
}

.request-card {
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 15px;
  width: calc(33.33% - 20px);
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.request-card h3 {
  margin-top: 0;
  color: #333;
}

.request-card ul {
  list-style-type: none;
  padding: 0;
}

.request-card li {
  margin-bottom: 5px;
}

@media (max-width: 768px) {
  .request-card {
    width: calc(50% - 20px);
  }
}

@media (max-width: 480px) {
  .request-card {
    width: 100%;
  }
}

.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  padding: 20px;
}

/* Default card styles */
.card {
  border: 3px solid;
  border-radius: 8px;
  padding: 0;  /* Removed padding from card */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  font-family: "Fira Sans", var(--md-text-font);
  font-size: 0.9375rem;
  line-height: 1.5;
  background: #121212;
}

.card ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;  /* Removed gap */
}

.card li {
  padding: 4px 12px;  /* Increased horizontal padding */
  color: #fff;
  background: #1a1a1a;
}

/* Remove border radius from edges that touch the card border */
.card li:first-child {
  border-radius: 5px 5px 0 0;  /* Only round top corners */
  font-weight: 600;
}

.card li:last-child {
  border-radius: 0 0 5px 5px;  /* Only round bottom corners */
}

/* Middle items have no border radius */
.card li:not(:first-child):not(:last-child) {
  border-radius: 0;
}

/* Class-specific styles */
.card.wizard li:nth-child(1) { background-color: #121212; color: #fff;  }
.card.warrior li:nth-child(1) { background-color: #121212; color: #fff;  }
.card.shaman li:nth-child(1) { background-color: #121212; color: #fff;  }
.card.shadow-knight li:nth-child(1) { background-color: #121212; color: #fff;  }
.card.rogue li:nth-child(1) { background-color: #121212; color: #fff;  }
.card.ranger li:nth-child(1) { background-color: #121212; color: #fff;  }
.card.paladin li:nth-child(1) { background-color: #121212; color: #fff;  }
.card.necromancer li:nth-child(1) { background-color: #121212; color: #fff;  }
.card.monk li:nth-child(1) { background-color: #121212; color: #fff;  }
.card.magician li:nth-child(1) { background-color: #121212; color: #fff;  }
.card.enchanter li:nth-child(1) { background-color: #121212; color: #fff;  }
.card.druid li:nth-child(1) { background-color: #121212; color: #fff;  }
.card.cleric li:nth-child(1) { background-color: #121212; color: #fff;  }
.card.bard li:nth-child(1) { background-color: #121212; color: #fff;  }

.card.wizard li:nth-child(2) { background-color: #941313; color: #fff; }
.card.warrior li:nth-child(2) { background-color: #946b29; color: #fff; }
.card.shaman li:nth-child(2) { background-color: #642e06; color: #fff; }
.card.shadow-knight li:nth-child(2) { background-color: #8c3030; color: #fff; }
.card.rogue li:nth-child(2) { background-color: #8c8c30; color: #fff; }
.card.ranger li:nth-child(2) { background-color: #156f1d; color: #fff; }
.card.paladin li:nth-child(2) { background-color: #ac3a96; color: #fff; }
.card.necromancer li:nth-child(2) { background-color: #5b308c; color: #fff; }
.card.monk li:nth-child(2) { background-color: #a45711; color: #fff; }
.card.magician li:nth-child(2) { background-color: #167e8d; color: #fff; }
.card.enchanter li:nth-child(2) { background-color: #00a5a9; color: #fff; }
.card.druid li:nth-child(2) { background-color: #39b343; color: #fff; }
.card.cleric li:nth-child(2) { background-color: #30388c; color: #fff; }
.card.bard li:nth-child(2) { background-color: #20d4be; color: #fff; }

.card.wizard li:nth-child(3) { background-color: #121212; color: #fff; }
.card.warrior li:nth-child(3) { background-color: #121212; color: #fff; }
.card.shaman li:nth-child(3) { background-color: #121212; color: #fff; }
.card.shadow-knight li:nth-child(3) { background-color: #121212; color: #fff; }
.card.rogue li:nth-child(3) { background-color: #121212; color: #fff; }
.card.ranger li:nth-child(3) { background-color: #121212; color: #fff; }
.card.paladin li:nth-child(3) { background-color: #121212; color: #fff; }
.card.necromancer li:nth-child(3) { background-color: #121212; color: #fff; }
.card.monk li:nth-child(3) { background-color: #121212; color: #fff; }
.card.magician li:nth-child(3) { background-color: #121212; color: #fff; }
.card.enchanter li:nth-child(3) { background-color: #121212; color: #fff; }
.card.druid li:nth-child(3) { background-color: #121212; color: #fff; }
.card.cleric li:nth-child(3) { background-color: #121212; color: #fff; }
.card.bard li:nth-child(3) { background-color: #121212; color: #fff; }

.card.wizard li:nth-child(4) { background-color: #121212; color: #fff;  }
.card.warrior li:nth-child(4) { background-color: #121212; color: #fff;  }
.card.shaman li:nth-child(4) { background-color: #121212; color: #fff;  }
.card.shadow-knight li:nth-child(4) { background-color: #121212; color: #fff;  }
.card.rogue li:nth-child(4) { background-color: #121212; color: #fff;  }
.card.ranger li:nth-child(4) { background-color: #121212; color: #fff;  }
.card.paladin li:nth-child(4) { background-color: #121212; color: #fff;  }
.card.necromancer li:nth-child(4) { background-color: #121212; color: #fff;  }
.card.monk li:nth-child(4) { background-color: #121212; color: #fff;  }
.card.magician li:nth-child(4) { background-color: #121212; color: #fff;  }
.card.enchanter li:nth-child(4) { background-color: #121212; color: #fff;  }
.card.druid li:nth-child(4) { background-color: #121212; color: #fff;  }
.card.cleric li:nth-child(4) { background-color: #121212; color: #fff;  }
.card.bard li:nth-child(4) { background-color: #121212; color: #fff;  }

.card.wizard li:nth-child(5) { background-color: #121212; color: #fff;  }
.card.warrior li:nth-child(5) { background-color: #121212; color: #fff;  }
.card.shaman li:nth-child(5) { background-color: #121212; color: #fff;  }
.card.shadow-knight li:nth-child(5) { background-color: #121212; color: #fff;  }
.card.rogue li:nth-child(5) { background-color: #121212; color: #fff;  }
.card.ranger li:nth-child(5) { background-color: #121212; color: #fff;  }
.card.paladin li:nth-child(5) { background-color: #121212; color: #fff;  }
.card.necromancer li:nth-child(5) { background-color: #121212; color: #fff;  }
.card.monk li:nth-child(5) { background-color: #121212; color: #fff;  }
.card.magician li:nth-child(5) { background-color: #121212; color: #fff;  }
.card.enchanter li:nth-child(5) { background-color: #121212; color: #fff;  }
.card.druid li:nth-child(5) { background-color: #121212; color: #fff;  }
.card.cleric li:nth-child(5) { background-color: #121212; color: #fff;  }
.card.bard li:nth-child(5) { background-color: #121212; color: #fff;  }

/* Border colors */
.card.wizard { border-color: #941313; }
.card.warrior { border-color: #946b29; }
.card.shaman { border-color: #642e06; }
.card.shadow-knight { border-color: #8c3030; }
.card.rogue { border-color: #8c8c30; }
.card.ranger { border-color: #156f1d; }
.card.paladin { border-color: #ac3a96; }
.card.necromancer { border-color: #5b308c; }
.card.monk { border-color: #a45711; }
.card.magician { border-color: #167e8d; }
.card.enchanter { border-color: #00a5a9; }
.card.druid { border-color: #39b343; }
.card.cleric { border-color: #30388c; }
.card.bard { border-color: #20d4be; }

.page-description {
  text-align: center;
  font-size: 1rem;
  margin-top: -0.5rem;
  margin-bottom: 1rem;
  color: #777;
  font-weight: 300;
}

/* Add to existing CSS */
.raid-description {
  font-family: "Fira Sans", var(--md-text-font);
  font-size: 0.875rem;
  color: #a0a0a0;
  margin: 4px 0 12px 0;
  line-height: 1.4;
  padding: 0 12px;
}

/* Add to existing CSS */
.md-content .toc {
  font-family: var(--md-text-font);
  margin: 1em 0;
}

.md-content .toc a {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--md-primary-fg-color);
  text-decoration: none;
  transition: color 0.2s ease;
  display: inline-block;
  margin: 0.3em 0;
}

.md-content .toc a:hover {
  color: var(--md-accent-fg-color);
  text-decoration: none;
}

/* TOC heading text */
.toc-heading {
  font-family: "Fira Sans", var(--md-text-font);
  font-size: 0.95rem;
  color: var(--link-col);
  margin: 1.5em 0 0.5em 0;
}

/* TOC description text */
.toc-description {
  font-family: "Fira Sans", var(--md-text-font);
  font-size: 0.95rem;
  color: var(--link-col);
  margin: 1.5em 0 0.5em 0;
}

/* Raid day anchor links */
.raid-day-links {
  margin: 1em 0;
}

.raid-day-links a {
  font-family: "Fira Sans", var(--md-text-font);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--link-col);
  text-decoration: none;
  transition: color 0.2s ease;
  display: inline-block;
  margin: 0.3em 0;
}

.raid-day-links a:hover {
  color: var(--md-accent-fg-color);
}

/* Request form link */
.request-form-link a {
  font-family: "Fira Sans", var(--md-text-font);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--link-col);
  text-decoration: none;
  transition: color 0.2s ease;
}

.request-form-link a:hover {
  color: var(--md-accent-fg-color);
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Fira Sans", var(--md-text-font);
}


.spell-tooltip {
    font-family: system-ui, sans-serif;
    padding: 12px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    max-width: 300px;
}

.spell-tooltip h4 {
    margin: 0 0 8px 0;
    color: #f5f5f5;
    font-size: 1.1em;
}

.spell-meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 12px;
    font-size: 0.9em;
    color: #888;
}

.spell-effects {
    font-size: 0.95em;
}

.spell-effect {
    padding: 4px 0;
    border-top: 1px solid #333;
}

/* Item tooltips */
.item-tooltip { /* styles */ }

/* Spell tooltips */
.spell-tooltip { 
    /* Reset any inherited item styles */
    background-image: none !important;
}

.spell-tooltip .item-icon {
    display: none !important;
}

/* Add this rule to prevent icon inheritance */
a[href*="/spell/"] .item-icon {
    display: none !important;
}

a[href^="https://www.pqdi.cc/spell/"]:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: #444;
}

/* spell tooltips */
.spell-item:hover a {
    color: #fff;
    background: rgba(60, 60, 60, 0.9);
    border-color: rgba(80, 80, 80, 0.9);
}

.tippy-box {
    background-color: transparent !important;
    border: none !important;
}

.tippy-arrow {
    display: none !important;
}

.spell-tooltip {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 4px;
    padding: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Spells List Container */
.spells-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 0;
    margin: 8px 0;
}

.spell-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.spell-icon {
    width: 16px;
    height: 16px;
}

.spell-item a {
    color: #ccc;
    text-decoration: none;
    background: rgba(40, 40, 40, 0.9);
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 0.95em;
    border: 1px solid rgba(60, 60, 60, 0.8);
}

/* Boss Info Styles */
body {
  /* These font styles are overriding beautifuljekyll.css */
  background-color: #121212;
  color: #f5f5f5;
  /* font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, sans-serif; */
  /* line-height: 1.4; */
  /* font-size: 14px; */
}

h2 {
  /* font-size: 1.2rem; */
  color: #e0e0e0;
  margin: 1rem 0 0.5rem;
  border-bottom: 1px solid #333;
  padding-bottom: 0.3rem;
}

/* Card Styles */
.info-section, .stats-grid, .spell-grid, .ability-grid, .info-lockout {
  background-color: #1e1e1e;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  margin-bottom: 1rem;
  overflow: hidden;
  padding: 0.5rem;
}

/* Basic Information */
.info-section {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.35rem;
}

.info-item {
  padding: 0.35rem 0.7rem;
  border-bottom: 1px solid #2a2a2a;
  font-size: 0.85rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: flex;
  justify-content: space-evenly;
  align-items: left;
  gap: 0.05rem;
}

/* Add HP value styling */
.info-item:first-child {
  color: #50fa7b;  /* Bright green color similar to game health bars */
  font-weight: 600;
  text-shadow: 0 0 8px rgba(80, 250, 123, 0.3);  /* Subtle glow effect */
}

.info-item strong {
  color: #9e9e9e;
  font-size: 0.8rem;
  min-width: 60px;
  display: inline-block;
}

/* Lockout */
.info-lockout {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.35rem;
  background-color: #1e1e1e;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  padding: 0.5rem;
  border: 1px solid #2a2a2a;
}

.info-lockoutitem {
  padding: 0.35rem 0.7rem;
  border-bottom: 1px solid #2a2a2a;
  font-size: 0.85rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: flex;
  justify-content: space-evenly;
  align-items: left;
  gap: 0.2rem;
  color: #f5f5f5;
}

.info-lockoutitem strong {
  color: #9e9e9e;
  font-size: 0.8rem;
  min-width: 60px;
  display: inline-block;
}

[data-theme="light"] .info-lockout {
  background-color: #e8e8e8;
  border: 1px solid #ddd;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .info-lockoutitem {
  color: #333333;
  border-bottom: 1px solid #e0e0e0;
}

[data-theme="light"] .info-lockoutitem strong {
  color: #555555;
}

/* Combat Stats */
.stats-grid {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.stats-cell {
  flex: 1;
  min-width: 150px;
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid #2a2a2a;
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.stats-cell strong {
  color: #9e9e9e;
  font-size: 0.8rem;
  min-width: 60px;
  margin-right: 0.5rem;
  display: inline-block;
}

/* Spells */
.spell-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.spell-cell {
  background-color: #2a2a2a;
  border-radius: 6px;
  transition: all 0.2s ease;
  overflow: hidden;
  border: 1px solid #333;
  font-size: 0.85rem;
}

.spell-cell a {
  color: #f5f5f5;
  text-decoration: none;
  display: block;
  padding: 0.5rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.2s ease;
}

.spell-cell:hover {
  background-color: #3a3a3a;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  border-color: #FF7A5E;
}

.spell-cell a:hover {
  color: #f5f5f5;
  text-decoration: none;
}

/* Special Abilities */
.ability-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.ability-cell {
  background-color: #2a2a2a;
  border-radius: 6px;
  transition: all 0.2s ease;
  padding: 0.5rem;
  text-align: center;
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid #333;
}

.ability-cell:hover {
  background-color: #3a3a3a;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  border-color: #FF7A5E;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .info-section {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .spell-grid, .ability-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .info-section {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .stats-row {
    flex-direction: column;
  }
  
  .stats-cell {
    width: 100%;
    min-width: 100%;
  }
  
  .spell-grid, .ability-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .info-section, .spell-grid, .ability-grid {
    grid-template-columns: 1fr;
  }
  
  .stats-row {
    grid-template-columns: 1fr;
  }
} 

[data-theme="dark"] {
  background-color: #121212;
  color: #ffffff;
}

[data-theme="light"] {
  background-color: #ffffff;
  color: #333333;
}

/* Fix heading colors in light mode */
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6 {
  color: #333333;
}

/* Fix other light mode specific styles */
[data-theme="light"] .card {
  background: #f5f5f5;
  color: #333333;
}

[data-theme="light"] .card li {
  background: #ffffff;
  color: #333333;
}

/* Light mode styles for Basic Information section */
[data-theme="light"] .info-section,
[data-theme="light"] .stats-grid,
[data-theme="light"] .spell-grid,
[data-theme="light"] .ability-grid {
  background-color: #e8e8e8;
  border: 1px solid #ddd;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .info-item {
  color: #333333;
  border-bottom: 1px solid #e0e0e0;
}

[data-theme="light"] .info-item strong,
[data-theme="light"] .stats-cell strong {
  color: #555555;
}

[data-theme="light"] .info-item:first-child {
  color: #2a8d3a;
  text-shadow: none;
}

[data-theme="light"] .spell-cell,
[data-theme="light"] .ability-cell {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
}

[data-theme="light"] .spell-cell a {
  color: #333333;
}

[data-theme="light"] .spell-cell:hover,
[data-theme="light"] .ability-cell:hover {
  background-color: #e8e8e8;
  border-color: #0085A1;
}

/* Keep spell tooltip styles consistent in both light and dark modes */
[data-theme="light"] .spell-tooltip,
[data-theme="dark"] .spell-tooltip {
  background: #1a1a1a;
  border: 1px solid #333;
  color: #f5f5f5;
}

[data-theme="light"] .spell-tooltip h4,
[data-theme="dark"] .spell-tooltip h4 {
  color: #f5f5f5;
}

[data-theme="light"] .spell-tooltip .spell-meta,
[data-theme="dark"] .spell-tooltip .spell-meta {
  color: #888;
}

[data-theme="light"] .spell-tooltip .spell-effect,
[data-theme="dark"] .spell-tooltip .spell-effect {
  color: #f5f5f5;
  border-top: 1px solid #333;
}

/* Image resizing styles */
[data-theme="dark"] .resize-img,
[data-theme="light"] .resize-img {
  height: 200px !important;
  width: auto !important;
  display: inline-block !important;
  margin-right: 5px !important;
  vertical-align: top !important;
  isolation: isolate !important;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Full size state */
[data-theme="dark"] .resize-img.full-size,
[data-theme="light"] .resize-img.full-size {
  height: auto !important;
  width: auto !important;
  max-width: 100% !important;
  position: relative;
  z-index: 1000;
}

/* Navigation Links */
.navbar-nav {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1rem;
}

.navbar-nav .nav-link {
  white-space: nowrap;
  padding: 0.5rem 0.75rem;
}

@media (max-width: 1199px) {
  .navbar-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
  }

  .navbar-nav::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
  }

  .navbar-nav .nav-link {
    padding: 0.5rem 0.5rem;
  }
}

/* View Toggle Button */
.view-toggle {
  position: fixed;
  bottom: 60px;
  right: 24px;
  font-size: 18px;
  cursor: pointer;
  background: none;
  border: none;
  outline: none;
  padding: 0;
  z-index: 1000;
  color: var(--text-col);
}

/* Only show on strategy and spoilers pages */
body:not(.strategy-page):not(.spoilers-page) .view-toggle {
  display: none;
}

/* Light mode styles */
[data-theme="light"] .view-toggle {
  background-color: #f0f0f0;
  border-color: #333333;
}

[data-theme="light"] .view-toggle:hover {
  background-color: #e0e0e0;
}

/* Remove emoji background */
.view-toggle span {
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-align: center;
  vertical-align: middle;
}

/* Copy Text Container Styles */
.copy-text-container {
    position: relative;
    background-color: #1e1e1e;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    margin: 1rem 0;
    padding: 1rem;
    border: 1px solid #333;
    transition: border-color 0.2s, background-color 0.2s;
}

.copy-text-content {
    background-color: transparent !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 0 !important;
    margin-bottom: 0.5rem;
    font-family: monospace !important;
    white-space: pre-wrap !important;
    word-wrap: break-word;
    color: #f5f5f5 !important;
    font-size: 1rem !important;
    line-height: 1.4 !important;
    max-height: 200px;
    overflow-y: auto;
    font-weight: bold;
    padding-bottom: 2.5em !important; /* Add space for the button */
    min-height: 3em;       /* At least two lines tall */
}

.copy-button {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    background-color: #333;
    color: #fff;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.copy-button:hover, .copy-button:focus {
    background-color: #3a3a3a;
    border-color: #FF7A5E;
    color: #fff;
    outline: none;
}

.copy-button.copied {
    background-color: #2a8d3a;
    border-color: #2a8d3a;
}

.copy-button.error {
    background-color: #8d2a2a;
    border-color: #8d2a2a;
}

/* Light theme styles */
[data-theme="light"] .copy-text-container {
    background-color: #e8e8e8;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid #ccc;
}

[data-theme="light"] .copy-text-content {
    background-color: transparent !important;
    border: none !important;
    color: #333 !important;
    font-weight: bold;
}

[data-theme="light"] .copy-button {
    background-color: #e0e0e0;
    color: #333;
    border: 1px solid #ccc;
}

[data-theme="light"] .copy-button:hover, [data-theme="light"] .copy-button:focus {
    background-color: #e8e8e8;
    border-color: #0085A1;
    color: #333;
    outline: none;
}

[data-theme="light"] .copy-button.copied {
    background-color: #2a8d3a;
    border-color: #2a8d3a;
    color: #fff;
}

[data-theme="light"] .copy-button.error {
    background-color: #8d2a2a;
    border-color: #8d2a2a;
    color: #fff;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .copy-text-container {
        padding: 0.75rem;
    }
    
    .copy-text-content {
        padding: 0.75rem;
        font-size: 0.85rem;
    }
    
    .copy-button {
        width: calc(100% - 1rem);
        left: 0.5rem;
        right: 0.5rem;
        bottom: 0.5rem;
        position: absolute;
    }
}

/* Gem Legend Styles */
.gem-legend {
    font-size: 0.85rem;
    line-height: 1.3;
}

.gem-legend h4 {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    color: var(--text-col);
}

.gem-legend-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.gem-legend-table th,
.gem-legend-table td {
    padding: 0.25rem 0.5rem;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.gem-legend-table th {
    font-weight: 600;
    color: var(--text-col);
}

.gem-legend-table td {
    white-space: nowrap;
}

.gem-legend-table a {
    color: var(--link-col);
    text-decoration: none;
    transition: color 0.2s ease;
}

.gem-legend-table a:hover {
    color: var(--hover-col);
}

/* Light theme adjustments */
[data-theme="light"] .gem-legend-table th,
[data-theme="light"] .gem-legend-table td {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .gem-legend h4 {
    color: #333;
}

[data-theme="light"] .gem-legend-table th {
    color: #333;
}

/* Mobile: Make Bootstrap dropdown menus drop down vertically */
@media (max-width: 991.98px) { /* Bootstrap xl breakpoint */
  .navbar-nav .dropdown-menu {
    position: static !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    background: #181818 !important; /* match your menu background */
    box-shadow: none !important;
    border-radius: 0 !important;
    left: 0 !important;
    top: auto !important;
    display: none; /* Hide by default */
  }
  .navbar-nav .dropdown.show .dropdown-menu {
    display: block !important; 
  }
  .navbar-nav .dropdown-menu .dropdown-item {
    padding-left: 2rem !important;
    white-space: normal !important;
  }
}

/* Calendar Container Styles */
.calendar-container {
    background-color: #1e1e1e;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    margin: 1rem 0;
    padding: 1rem;
    border: 1px solid #333;
    transition: border-color 0.2s, background-color 0.2s;
}

.calendar-container iframe {
    border-radius: 4px;
    transition: all 0.2s ease;
}

.calendar-container:hover {
    border-color: #FF7A5E;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Light theme calendar styles */
[data-theme="light"] .calendar-container {
    background-color: #e8e8e8;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid #ddd;
}

[data-theme="light"] .calendar-container:hover {
    border-color: #0085A1;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Mobile responsiveness for calendar */
@media (max-width: 768px) {
    .calendar-container {
        padding: 0.5rem;
    }
    
    .calendar-container iframe {
        height: 400px !important;
    }
}

/* Focus page specific styles */
.focus-page {
  font-size: 0.95rem; /* Slightly reduced base font size */
}

.focus-page table {
  width: 100%;
  margin-bottom: 1.5rem;
  border-collapse: collapse;
  display: table;
  table-layout: fixed;
}

.focus-page table th,
.focus-page table td {
  padding: 0.75rem;
  border: 1px solid var(--navbar-border-col);
  text-align: left;
  vertical-align: top; /* Added to align content to top */
}

/* Column widths */
.focus-page table th:nth-child(1),
.focus-page table td:nth-child(1) {
  width: 40%; /* Name column */
  white-space: normal; /* Allow wrapping but with hyphenation */
  hyphens: auto;
}

.focus-page table th:nth-child(2),
.focus-page table td:nth-child(2) {
  width: 30%; /* Zone column */
}

.focus-page table th:nth-child(3),
.focus-page table td:nth-child(3) {
  width: 30%; /* Mob column */
}

.focus-page table th {
  background-color: var(--navbar-col);
  font-weight: 600;
}

.focus-page table tr:nth-child(even) {
  background-color: var(--navbar-col);
}

.focus-page table tr:hover {
  background-color: rgba(255, 255, 255, 0.05);
  transition: background-color 0.2s ease;
}

/* Make tables responsive */
@media (max-width: 768px) {
  .focus-page table {
    display: block; /* Switch to block on mobile */
    overflow-x: auto; /* Enable horizontal scroll */
  }
  
  .focus-page table th,
  .focus-page table td {
    padding: 0.5rem;
    min-width: 140px; /* Slightly increased for better readability */
    font-size: 0.95rem; /* Slightly reduced font size on mobile */
  }

  /* Adjust column widths for mobile */
  .focus-page table th:nth-child(1),
  .focus-page table td:nth-child(1) {
    min-width: 180px; /* Wider for item names */
  }
  
  .focus-page table td:first-child {
    font-weight: 600;
  }
}

/* Dark mode support */
[data-theme="dark"] .focus-page table th {
  background-color: var(--navbar-col-drk);
}

[data-theme="dark"] .focus-page table tr:nth-child(even) {
  background-color: var(--navbar-col-drk);
}

[data-theme="dark"] .focus-page table tr:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

/* Light mode hover effect */
[data-theme="light"] .focus-page table tr:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

/* AA Page Styles - Similar to focus page but optimized for AA tables */
.aa-page {
  max-width: 95%;
  margin: 0 auto;
}

.aa-page table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 0.9em;
  table-layout: fixed;
}

.aa-page table th,
.aa-page table td {
  padding: 8px 12px;
  text-align: left;
  border: 1px solid #ddd;
  word-wrap: break-word;
  vertical-align: top;
}

/* Column widths optimized for AA tables */
.aa-page table th:nth-child(1),
.aa-page table td:nth-child(1) {
  width: 20%; /* Name */
}

.aa-page table th:nth-child(2),
.aa-page table td:nth-child(2) {
  width: 12%; /* Classes */
}

.aa-page table th:nth-child(3),
.aa-page table td:nth-child(3) {
  width: 8%; /* Ranks */
}

.aa-page table th:nth-child(4),
.aa-page table td:nth-child(4) {
  width: 8%; /* Cost */
}

.aa-page table th:nth-child(5),
.aa-page table td:nth-child(5) {
  width: 45%; /* Description */
}

.aa-page table th:nth-child(6),
.aa-page table td:nth-child(6) {
  width: 7%; /* Alt Activation Code */
}

.aa-page table th {
  background-color: #f8f9fa;
  font-weight: bold;
  color: #333;
  position: sticky;
  top: 0;
  z-index: 10;
}

.aa-page table tr:nth-child(even) {
  background-color: #f9f9f9;
}

.aa-page table tr:hover {
  background-color: #e9ecef;
  transition: background-color 0.2s ease;
}

/* Quick Reference table specific styles */
.aa-page table:last-of-type {
  margin-bottom: 40px;
}

.aa-page table:last-of-type th:nth-child(1),
.aa-page table:last-of-type td:nth-child(1) {
  width: 15%; /* Alt Activate # */
}

.aa-page table:last-of-type th:nth-child(2),
.aa-page table:last-of-type td:nth-child(2) {
  width: 85%; /* Ability Name (Classes) */
}

/* Responsive design for AA page */
@media (max-width: 768px) {
  .aa-page {
    max-width: 100%;
    margin: 0;
  }
  
  .aa-page table {
    font-size: 0.8em;
    table-layout: auto;
  }
  
  .aa-page table th,
  .aa-page table td {
    padding: 6px 8px;
  }
  
  .aa-page table th:nth-child(1),
  .aa-page table td:nth-child(1) {
    width: auto;
  }
  
  .aa-page table td:first-child {
    font-weight: bold;
    background-color: #f8f9fa;
  }
}

/* Dark theme support for AA page */
[data-theme="dark"] .aa-page table th {
  background-color: #2c2c2c;
  color: #fff;
  border-color: #444;
}

[data-theme="dark"] .aa-page table tr:nth-child(even) {
  background-color: #1a1a1a;
}

[data-theme="dark"] .aa-page table tr:hover {
  background-color: #333;
}

[data-theme="dark"] .aa-page table th,
[data-theme="dark"] .aa-page table td {
  border-color: #444;
}

[data-theme="light"] .aa-page table tr:hover {
  background-color: #f8f9fa;
}

/* AA Page warning box styling for both themes */
.aa-page div[style*="background-color: #fff5f5"] {
  background-color: #fff5f5 !important;
  border: 2px solid #dc3545 !important;
  color: #dc3545 !important;
}

/* Dark theme support for AA warning box */
[data-theme="dark"] .aa-page div[style*="background-color: #fff5f5"] {
  background-color: #0f0707 !important;
  border-color: #dc3545 !important;
  color: #ff6b6b !important;
}

[data-theme="dark"] .aa-page div[style*="background-color: #fff5f5"] a {
  color: #ff6b6b !important;
}

/* Highlight broken AA rows in aa-page */
.aa-page table tr:has(a[href="/baa/"]) {
  background-color: #ffe6e6 !important;
  border-left: 4px solid #dc3545;
}

.aa-page table tr:has(a[href="/baa/"]):hover {
  background-color: #ffcccc !important;
}

/* Dark theme support for broken AA rows */
[data-theme="dark"] .aa-page table tr:has(a[href="/baa/"]) {
  background-color: #3a1a1a !important;
  border-left: 4px solid #dc3545;
}

[data-theme="dark"] .aa-page table tr:has(a[href="/baa/"]):hover {
  background-color: #4a2a2a !important;
}

/* BAA Page Styles - Optimized for the broken AA page */
.baa-page {
  max-width: 95%;
  margin: 0 auto;
}

.baa-page table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 0.95em;
  table-layout: fixed;
}

.baa-page table th,
.baa-page table td {
  padding: 12px 16px;
  text-align: left;
  border: 1px solid #ddd;
  word-wrap: break-word;
  vertical-align: top;
  line-height: 1.4;
}

/* Column widths optimized for BAA table */
.baa-page table th:nth-child(1),
.baa-page table td:nth-child(1) {
  width: 20%; /* Name */
  font-weight: 600;
}

.baa-page table th:nth-child(2),
.baa-page table td:nth-child(2) {
  width: 15%; /* Classes affected */
}

.baa-page table th:nth-child(3),
.baa-page table td:nth-child(3) {
  width: 32%; /* How you may expect it to work */
}

.baa-page table th:nth-child(4),
.baa-page table td:nth-child(4) {
  width: 33%; /* How it actually works */
}

.baa-page table th {
  background-color: #dc3545;
  font-weight: bold;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
}

.baa-page table tr:nth-child(even) {
  background-color: #fff5f5;
}

.baa-page table tr:nth-child(odd) {
  background-color: #fff;
}

.baa-page table tr:hover {
  background-color: #ffe6e6;
  transition: background-color 0.2s ease;
}

/* Warning styling for the page */
.baa-page h1 {
  color: #dc3545;
  border-bottom: 2px solid #dc3545;
  padding-bottom: 10px;
  margin-bottom: 30px;
}

.baa-page h1::before {
  content: "⚠️ ";
  margin-right: 10px;
}

/* Responsive design for BAA page */
@media (max-width: 768px) {
  .baa-page {
    max-width: 100%;
    margin: 0;
  }
  
  .baa-page table {
    font-size: 0.85em;
    table-layout: auto;
  }
  
  .baa-page table th,
  .baa-page table td {
    padding: 8px 10px;
  }
  
  .baa-page table th:nth-child(1),
  .baa-page table td:nth-child(1) {
    width: auto;
  }
  
  .baa-page table td:first-child {
    font-weight: bold;
    background-color: #fff5f5;
  }
}

/* Dark theme support for BAA page */
[data-theme="dark"] .baa-page table th {
  background-color: #dc3545;
  color: #fff;
  border-color: #dc3545;
}

[data-theme="dark"] .baa-page table tr:nth-child(even) {
  background-color: #1a1a1a;
}

[data-theme="dark"] .baa-page table tr:nth-child(odd) {
  background-color: #2c2c2c;
}

[data-theme="dark"] .baa-page table tr:hover {
  background-color: #3a1a1a;
}

[data-theme="dark"] .baa-page table th,
[data-theme="dark"] .baa-page table td {
  border-color: #444;
}

[data-theme="dark"] .baa-page h1 {
  color: #ff6b6b;
  border-bottom-color: #ff6b6b;
}

[data-theme="light"] .baa-page table tr:hover {
  background-color: #ffe6e6;
}