/* Refactored and Cleaned spells.css (Corrected + Materials Update) */

/* --- General Styles --- */
body {
  background-color: #f2f2f2;
  font-family: Roboto, tahoma, verdana, arial, sans-serif;
  padding: 10px;
}

/* --- Card Container --- */
.card-container {
  display: flex; /* Or grid, if preferred for layout */
  flex-wrap: wrap;
  gap: 20px; /* Spacing between cards */
  padding-top: 10px;
}

/* --- Card Base Styles --- */
.card {
  width: 300px;
  border: 1px solid #000000;
  font-size: 11px; /* Base font size for card */
  color: #333333;
  background-color: #ffffff;
  display: flex; /* Use flex for card structure */
  flex-direction: column;
  box-sizing: border-box; /* Consistent box-sizing */
  overflow: hidden; /* Prevent content overflow */
}

/* --- Card Header --- */
.card header {
  background: #cccccc; /* Default background */
  position: relative; /* Keep relative for header-components positioning */
  font-size: 14px; /* Header font size */
  height: 27px; /* Header height */
  line-height: 27px; /* 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 */
  color: #333333; /* Default text color */
  border-color: #333333 !important; /* Default border color */
}

.card .level {
  font-size: 14px; /* Match header font size */
  font-weight: bold;
  height: 27px; /* Match header height */
  width: 27px; /* Adjusted width to match height */
  line-height: 27px; /* Center text vertically */
  text-align: center;
  border-bottom-right-radius: 25px; /* Keep the curve */
  box-sizing: border-box;
  border-right: 1px solid; /* Use inherited border color */
  border-bottom: 1px solid; /* Use inherited border color */
  flex-shrink: 0; /* Prevent shrinking */
  color: inherit; /* Inherit color from header */
  padding-right: 3px; /* Slight padding adjustment */
}

.card .name {
  font-size: 14px; /* Match header font size */
  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 */
}

.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%;
}

.card .header-components span { /* Style spans within header-components */
  font-size: 10px; /* Smaller font size for components */
  padding: 0 2px;
  margin: 0 1px;
  font-weight: bold;
  color: black; /* Default component color, override by school */
}

/* --- Card Section (Main Content) --- */
.card section {
  padding: 5px;
  box-sizing: border-box;
  flex-grow: 1; /* Allow section to take available space */
}

/* --- Stats Grid --- */
.card .stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* Flexible columns */
  gap: 3px; /* Consistent gap */
  padding: 5px 0; /* Vertical padding */
  box-sizing: border-box;
  font-size: 11px;
  text-align: left;
}

.card .stats-grid .stat-item { /* Apply common styles to all stat items */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.card .stats-grid strong { /* Style the label part */
  font-weight: bold;
}

.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 */
}

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

.card .description-content {
  height: 190px; /* Keep original height */
  max-height: 250px; /* Add a max-height */
  overflow-y: auto; /* Vertical scroll */
  padding: 5px;
  box-sizing: border-box;
  font-size: 11px;
  line-height: 1.4;
}

.card .description-content p {
  margin-top: 0;
  margin-bottom: 5px; /* Space between paragraphs */
}

.card .description-content .double-break {
  height: 1em; /* This creates a gap equivalent to one line of text. Adjust as needed. */
  /* Or you could use margin: */
  /* margin-top: 10px; */ /* Adds extra space above the next paragraph */
  /* margin-bottom: 10px; */ /* Adds extra space after the previous paragraph */
}

/* --- Materials (Updated) --- */
.card .Materials {
    font-size: 10px;     /* Matches popup base font */
    font-weight: bold;
    padding: 5px;        /* Consistent padding like popup section */
    margin-top: 5px;     /* Space above */
    border-top: 1px solid #eee; /* Separator line */
    box-sizing: border-box;
    line-height: 1.4;    /* Match description line height */
    background: #fafafa;
}

/* --- School Specific Styles (Corrected) --- */

/* Apply school background colors and text/border colors directly */
.card.abjuration header {
  background: #cccccc;
  color: #333333;
  border-color: #333333 !important;
}
.card.abjuration .header-components span { color: black; }

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

.card.transmutation header {
  background: #00c2c2;
  color: white;
  border-color: white !important;
}
.card.transmutation .header-components span { color: black; } /* Default */

.card.conjuration header {
  background: rgb(182, 3, 252);
  color: white;
  border-color: white !important;
}
.card.conjuration .header-components span { color: black; } /* Default */

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

.card.illusion header {
  background: #0000c2;
  color: white;
  border-color: white !important;
}
.card.illusion .header-components span { color: black; } /* Default */

.card.manipulation header {
  background: #c20000;
  color: white;
  border-color: white !important;
}
.card.manipulation .header-components span { color: black; } /* Default */

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

.card.animation header {
  background: #666666;
  color: #eeeeee;
  border-color: #eeeeee !important;
}
.card.animation .header-components span { color: #eeeeee; } /* Override */

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

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

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

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

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


/* --- Utility --- */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/* --- Search/Filter Area (From spells2.html context) --- */
#search {
  margin-bottom: 20px;
  padding: 10px;
  background-color: #e9e9e9;
  border: 1px solid #ccc;
  border-radius: 4px;
}

#search form label {
  margin-right: 5px;
  font-weight: bold;
}

#search form select,
#search form button,
#search form a {
  margin-right: 10px;
  padding: 5px 8px;
}

#search form button,
#search form a {
    cursor: pointer;
}

#search form a {
    text-decoration: none;
    color: #007bff;
}
#search form a:hover {
    text-decoration: underline;
}

/* --- Top Headers (From spells2.html context) --- */
.top-headers {
  font-size: 16px;
  font-weight: bold;
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* Space between header items */
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ccc;
}

.top-headers > div {
  padding: 5px 10px;
  border-radius: 4px;
}

/* Apply school colors to top headers */
.top-headers .animation { background: #666666; color: #eeeeee; }
.top-headers .charm { background: rgb(255, 97, 231); color: #333333; }
.top-headers .conjuration { background: rgb(182, 3, 252); color: white; }
.top-headers .divination { background: #ffd700; color: #333333; }
.top-headers .manipulation { background: #c20000; color: white; }
.top-headers .enchantment { background: #00c200; color: #333333; }
.top-headers .illusion { background: #0000c2; color: white; }
.top-headers .transmutation { background: #00c2c2; color: white; }
/* Add other schools if needed */