/* Consolidated and Cleaned spell-popup.css */

#spell-popup {
  position: absolute;
  width: 300px; /* Adjusted width */
  padding: 0.5rem; /* Base padding */
  border: 1px solid #333;
  background: #fefefe;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  display: none; /* Initially hidden */
  z-index: 2000;
  box-sizing: border-box;
}

#spell-popup .card {
  width: 100%; /* Use full width of popup container */
  margin: 0;
  font-size: 10px; /* Adjusted base font size */
  box-sizing: border-box;
  overflow: hidden; /* Hide overflow content */
  display: flex; /* Use flex for overall card structure */
  flex-direction: column;
  height: auto; /* Allow height to adjust */
}

/* --- Header Section (Using Flexbox) --- */
#spell-popup .card header {
  background: #cccccc; /* Default background */
  position: relative; /* Keep relative for potential pseudo-elements if needed */
  font-size: 11px; /* Header font size */
  height: 24px; /* Header height */
  line-height: 24px; /* Match height */
  padding: 0; /* Remove padding, flex handles spacing */
  box-sizing: border-box;
  display: flex;
  align-items: center; /* Vertically center items */
  width: 100%;
  overflow: hidden; /* Prevent content spilling out */
}

#spell-popup .card .level {
  font-size: 11px;
  height: 24px;
  width: 24px;
  border-bottom-right-radius: 15px;
  text-align: center;
  line-height: 24px;
  box-sizing: border-box;
  border-right: 1px solid; /* Default border color applied by school */
  border-bottom: 1px solid; /* Default border color applied by school */
  flex-shrink: 0; /* Prevent shrinking */
  color: inherit; /* Inherit color from header based on school */
}

#spell-popup .card .name {
  font-size: 11px;
  font-weight: bold;
  padding: 0 5px; /* Small horizontal padding */
  flex-grow: 1; /* Allow name to take available space */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  box-sizing: border-box;
  text-align: left;
  color: inherit; /* Inherit color from header based on school */
}

#spell-popup .card .header-components {
  display: flex;
  align-items: center;
  gap: 3px; /* Space between components */
  padding: 0 5px; /* Padding on the right */
  flex-shrink: 0; /* Prevent shrinking */
  height: 100%;
}

#spell-popup .card .header-components span { /* Style spans within header-components */
  font-size: 9px;
  padding: 0 2px;
  margin: 0 1px;
  color: inherit; /* Inherit color from header based on school */
  /* Specific colors for S, V, M applied by school rules below */
}

/* --- Main Section --- */
#spell-popup .card section {
  padding: 5px;
  box-sizing: border-box;
  flex-grow: 1; /* Allow section to take available space */
}

/* --- Description --- */
#spell-popup .card .description {
  padding: 5px 0;
  margin-top: 5px;
  margin-bottom: 5px;
  background: #aaaaaa;
  text-align: justify;
  box-sizing: border-box;
}

#spell-popup .card .description-content {
  height: 100px; /* Adjust height as needed */
  max-height: 150px;
  padding: 5px;
  overflow-y: auto; /* Add scroll for overflow */
  box-sizing: border-box;
  font-size: 10px;
  line-height: 1.4;
}

#spell-popup .card .description-content p {
  margin-top: 0;
  margin-bottom: 5px;
}

/* --- Stats Grid --- */
#spell-popup .card .stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); /* Flexible columns */
  gap: 3px;
  padding: 3px; /* Consistent padding */
  box-sizing: border-box;
  font-size: 10px;
  text-align: left; /* Default alignment for grid cells */
}

#spell-popup .card .stats-grid .stat-item {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left; /* Explicitly align text left */
}

#spell-popup .card .stats-grid .full-row {
  grid-column: 1 / -1; /* Span across all columns */
  white-space: normal; /* Allow wrapping for full-row items */
  overflow: auto; /* Allow scrolling if needed */
}

#spell-popup .card .stat-item strong {
  font-size: 10px;
  font-weight: bold; /* Ensure strong tag is bold */
}

/* --- School Display --- */
#spell-popup .card .school {
  font-size: 10px;
  padding-left: 5px;
  margin-top: 5px;
  box-sizing: border-box;
}

/* --- School Specific Styles (Applied to Popup Card) --- */

/* Default/Abjuration */
#spell-popup .card.abjuration header,
#spell-popup .card:not([class*=" header"]) header /* Apply default if no school class */
{
  background: #cccccc;
  color: #333333;
  border-color: #333333 !important; /* Apply to borders within header */
}
#spell-popup .card.abjuration .header-components span,
#spell-popup .card:not([class*=" header"]) .header-components span {
  color: black; /* Specific component color */
}

/* Charm */
#spell-popup .card.charm header {
  background: rgb(255, 97, 231);
  color: #333333;
  border-color: #333333 !important;
}
#spell-popup .card.charm .header-components span {
  color: black;
}

/* Transmutation */
#spell-popup .card.transmutation header {
  background: #00c2c2;
  color: white;
  border-color: white !important;
}
#spell-popup .card.transmutation .header-components span {
  color: black; /* Or white? Adjust as needed */
}

/* Conjuration */
#spell-popup .card.conjuration header {
  background: rgb(182, 3, 252);
  color: white;
  border-color: white !important;
}
#spell-popup .card.conjuration .header-components span {
  color: black; /* Or white? Adjust as needed */
}

/* Enchantment */
#spell-popup .card.enchantment header {
  background: #00c200;
  color: #333333;
  border-color: #333333 !important;
}
#spell-popup .card.enchantment .header-components span {
  color: black;
}

/* Illusion */
#spell-popup .card.illusion header {
  background: #0000c2;
  color: white;
  border-color: white !important;
}
#spell-popup .card.illusion .header-components span {
  color: black; /* Or white? Adjust as needed */
}

/* Manipulation */
#spell-popup .card.manipulation header {
  background: #c20000;
  color: white;
  border-color: white !important;
}
#spell-popup .card.manipulation .header-components span {
  color: black; /* Or white? Adjust as needed */
}

/* Divination */
#spell-popup .card.divination header {
  background: #ffd700;
  color: #333333;
  border-color: #333333 !important;
}
#spell-popup .card.divination .header-components span {
  color: black;
}

/* Animation */
#spell-popup .card.animation header {
  background: #666666;
  color: #eeeeee;
  border-color: #eeeeee !important;
}
#spell-popup .card.animation .header-components span {
  color: black; /* Or #eeeeee? Adjust as needed */
}

/* Blessing */
#spell-popup .card.blessing header {
  background: #00b068;
  color: #eeeeee;
  border-color: #eeeeee !important;
}
#spell-popup .card.blessing .header-components span {
  color: #eeeeee;
}

/* Chant */
#spell-popup .card.chant header {
  background: darkgoldenrod;
  color: #eeeeee;
  border-color: #eeeeee !important;
}
#spell-popup .card.chant .header-components span {
  color: #eeeeee;
}

/* Miracle */
#spell-popup .card.miracle header {
  background: #d24973;
  color: #eeeeee;
  border-color: #eeeeee !important;
}
#spell-popup .card.miracle .header-components span {
  color: #eeeeee;
}

/* Consecration */
#spell-popup .card.consecration header {
  background: mediumpurple;
  color: #eeeeee;
  border-color: #eeeeee !important;
}
#spell-popup .card.consecration .header-components span {
  color: #eeeeee;
}

/* Ward */
#spell-popup .card.ward header {
  background: cornflowerblue;
  color: #eeeeee;
  border-color: #eeeeee !important;
}
#spell-popup .card.ward .header-components span {
  color: #eeeeee;
}

/* --- Button Container --- */
#spell-popup .popup-button-container {
  padding: 8px 5px 5px 5px; /* Existing padding */
  text-align: center;       /* Existing alignment */
  border-top: 1px solid #eee;/* Existing border */
  margin-top: 5px;         /* Existing margin */
  display: flex;           /* Existing display */
  justify-content: space-around; /* Existing justification */
  flex-wrap: wrap;         /* Existing wrapping */
  gap: 5px;                /* Existing gap */
  /* Maybe add a min-height if buttons wrap and cause issues */
  /* min-height: 25px; */
}

#spell-popup .popup-button-container .modify-stat-button {
  font-size: 9px;  /* INCREASED: From 8px (example value, adjust as needed) */
  /* padding: 1px 4px; /* INCREASED: Adjust vertical and horizontal padding */
  line-height: 1.2; /* Optional: Adjust line height slightly if needed */
  /* You can keep or override other properties like border, background, margin */
  margin: 0; /* Reset margin if needed within the button container */
  border: 1px solid #666;
  background: #eee;
  color: black;
  cursor: pointer;
}

/* New Materials block */
#spell-popup .Materials {
  font-size: 10px;
  padding: 5px;
  margin-top: 6px;
  border-top: 1px solid #ccc;
  background: #fafafa;
  text-align: left; /* ADDED: Explicitly align text to the left */
  box-sizing: border-box; /* Good practice to include */
}