/* Base styles for dark mode compatibility */
body {
    font-family: 'Inter', sans-serif;
    /* Ensure a default text color that works well on both light and dark backgrounds */
    color: #374151;
    /* gray-800 for light mode */
    line-height: 1.6;
    /* Improved line height for readability */
}

/* New class for centering main page titles */
.main-page-title {
    text-align: center;
    width: 100%;
    /* Ensure it takes full width to center effectively */
}

/* Table styles */
table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 0.75rem;
    /* rounded-xl */
    overflow: hidden;
    /* Ensures rounded corners apply to children */
    table-layout: fixed;
    /* Added to control column widths more precisely */
}

/* General table cell styling */
th,
td {
    padding: 0.75rem 0.75rem;
    /* Reduced padding for more space */
    text-align: left;
    font-size: 0.875rem;
    /* text-sm, slightly smaller for more columns */
}

/* Table headers - ensure nowrap for clarity and sorting icons */
th {
    white-space: nowrap;
    text-align: center;
    /* Centering headers as requested */
}

/* --- Responsive Table Column Hiding --- */

/* Default (mobile-first): Only Image and Label are visible */
#unitTable th:nth-child(1),
/* Image */
#unitTable td:nth-child(1),
/* Image */
#unitTable th:nth-child(2),
/* Label */
#unitTable td:nth-child(2) {
    /* Label */
    display: table-cell;
    /* Ensure these are always visible */
}

/* Hide all other columns by default */
#unitTable th:nth-child(n+3),
/* Class, Rarity, Community Ranking, HP, Damage, Cooldown, DPS */
#unitTable td:nth-child(n+3) {
    /* Class, Rarity, Community Ranking, HP, Damage, Cooldown, DPS */
    display: none;
}

/* Small screens (sm): Show Class and Rarity */
@media (min-width: 640px) {

    #unitTable th:nth-child(3),
    /* Class */
    #unitTable td:nth-child(3),
    /* Class */
    #unitTable th:nth-child(4),
    /* Rarity */
    #unitTable td:nth-child(4) {
        /* Rarity */
        display: table-cell;
    }
}

/* Medium screens (md): Show Community Ranking */
@media (min-width: 768px) {

    #unitTable th:nth-child(5),
    /* Community Ranking */
    #unitTable td:nth-child(5) {
        /* Community Ranking */
        display: table-cell;
    }
}

/* Large screens (lg): Show HP, Damage, Cooldown, DPS */
@media (min-width: 1024px) {

    #unitTable th:nth-child(6),
    /* HP */
    #unitTable td:nth-child(6),
    /* HP */
    #unitTable th:nth-child(7),
    /* Damage */
    #unitTable td:nth-child(7),
    /* Damage */
    #unitTable th:nth-child(8),
    /* Cooldown */
    #unitTable td:nth-child(8),
    /* Cooldown */
    #unitTable th:nth-child(9),
    /* DPS */
    #unitTable td:nth-child(9) {
        /* DPS */
        display: table-cell;
    }
}

/* --- Column Widths (Adjusted for visible columns) --- */
/* These widths will apply when the columns are visible */
#unitTable tbody td:nth-child(1) {
    /* Image */
    width: 60px;
    min-width: 60px;
    padding: 0.5rem;
}

#unitTable tbody td:nth-child(2) {
    /* Label - allow text wrapping */
    width: 350px;
    /* Increased width significantly for better wrapping */
    min-width: 320px;
    /* Ensure a minimum width for wrapping */
    white-space: normal;
    /* Allow text to wrap */
    word-break: break-word;
    /* Ensure long words break if necessary */
    padding-right: 1rem;
    /* Added more right padding for extra space */
}

#unitTable tbody td:nth-child(3),
/* Class */
#unitTable tbody td:nth-child(4) {
    /* Rarity */
    width: 80px;
    min-width: 80px;
}

#unitTable tbody td:nth-child(5) {
    /* Community Ranking */
    width: 150px;
    /* Increased width to prevent header truncation */
    min-width: 150px;
    text-align: center;
}

/* Numerical stats (HP, Damage, Cooldown, DPS) */
#unitTable tbody td:nth-child(n+6):nth-child(-n+9) {
    /* HP to DPS */
    width: 80px;
    /* Increased width to prevent header truncation */
    min-width: 80px;
    text-align: center;
}


/* Specific styling for Unit Label column */
#unitTable tbody td:nth-child(2) {
    /* Targeting the second column (Label) */
    font-size: 1.125rem;
    /* text-lg */
    font-weight: 700;
    /* font-bold */
    /* Background color and text color set by rarity classes below */
}

/* Rarity-specific background and text colors for Unit Labels */
/* These classes are applied directly to the <td> element for the Label */
.rarity-Common {
    background-color: #e0e0e0;
    color: #1f2937;
}

/* Lighter Silver/Light Gray, Dark text */
.rarity-Uncommon {
    background-color: #a7f3d0;
    color: #1f2937;
}

/* Lighter Light Green, Dark text */
.rarity-Rare {
    background-color: #bfdbfe;
    color: #1f2937;
}

/* Lighter Light Blue, Dark text */
.rarity-Epic {
    background-color: #e9d5ff;
    color: #1f2937;
}

/* Lighter Plum/Light Purple, Dark text */
.rarity-Legendary {
    background-color: #fcd34d;
    color: #1f2937;
}

/* Lighter Gold, Dark text */
.rarity-Mythic {
    background-color: #fca5a5;
    color: #1f2937;
}

/* Lighter Tomato/Orange-Red, Dark text */
.rarity-Demonic {
    background-color: #ef4444;
    color: #ffffff;
}

/* Brighter Red, White text */
.rarity-Ancient {
    background-color: #60a5fa;
    color: #ffffff;
}

/* Brighter Steel Blue, White text */


/* Styling for Class and Rarity columns */
#unitTable tbody td:nth-child(3),
/* Class */
#unitTable tbody td:nth-child(4) {
    /* Rarity */
    font-weight: 500;
    /* font-medium */
    font-size: 1rem;
    /* text-base */
    color: #1f2937;
    /* Dark text for light mode */
}

.dark #unitTable tbody td:nth-child(3),
.dark #unitTable tbody td:nth-child(4) {
    color: #d1d5db;
    /* gray-300 */
}

/* Styling for other stats columns */
#unitTable tbody td:nth-child(n+5) {
    /* All columns from Community Ranking onwards */
    font-size: 1rem;
    /* text-base */
    color: #1f2937;
    /* Dark text for light mode */
}

.dark #unitTable tbody td:nth-child(n+5) {
    color: #e5e7eb;
    /* gray-200 */
}


/* Light Mode Table Styles */
.light body {
    background-color: #f3f4f6;
    /* gray-100 */
    color: #000000;
    /* Black for better contrast */
}

.light main {
    background-color: #ffffff;
    /* white */
}

.light th {
    background-color: #1f2937;
    /* gray-800 */
    color: #f9fafb;
    /* gray-50 */
    cursor: pointer;
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 1px solid #a0a7af;
    /* Darker gray for better border visibility */
    transition: background-color 0.2s ease-in-out;
    /* Smooth transition on hover */
}

.light th:hover {
    background-color: #374151;
    /* gray-700 */
}

.light tbody tr:nth-child(even) {
    background-color: #f9fafb;
    /* gray-50 */
}

.light tbody tr:nth-child(odd) {
    background-color: #ffffff;
    /* white */
}

.light tbody tr:hover {
    background-color: #e5e7eb;
    /* gray-200 */
    transition: background-color 0.2s ease-in-out;
    /* Smooth transition on hover */
}

.light td {
    border-bottom: 1px solid #a0a7af;
    /* Darker gray for better border visibility */
    color: #000000;
    /* Ensure all table cell text is black in light mode */
}

.light .tab-button {
    background-color: #e5e7eb;
    /* gray-200 */
    color: #000000;
    /* Black for better contrast */
}

.light .tab-button.active {
    background-color: #3b82f6;
    /* blue-500 */
    color: #ffffff;
}

.light .tab-button:hover:not(.active) {
    background-color: #d1d5db;
    /* gray-300 */
}

/* Ensure all headings are black in light mode */
.light h1,
.light h2,
.light h3,
.light h4,
.light h5,
.light h6 {
    color: #000000;
    /* Black text for headings in light mode */
}


/* Dark Mode Table Styles */
.dark body {
    background-color: #111827;
    /* gray-900 */
    color: #e5e7eb;
    /* gray-200 */
}

.dark main {
    background-color: #1f2937;
    /* gray-800 */
}

.dark th {
    background-color: #374151;
    /* gray-700 */
    color: #f9fafb;
    /* gray-50 */
    cursor: pointer;
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 1px solid #4b5563;
    /* border-gray-600 */
    transition: background-color 0.2s ease-in-out;
    /* Smooth transition on hover */
}

.dark th:hover {
    background-color: #4b5563;
    /* gray-600 */
}

.dark tbody tr:nth-child(even) {
    background-color: #1f2937;
    /* gray-800 */
}

.dark tbody tr:nth-child(odd) {
    background-color: #374151;
    /* gray-700 */
}

.dark tbody tr:hover {
    background-color: #4b5563;
    /* gray-600 */
    transition: background-color 0.2s ease-in-out;
    /* Smooth transition on hover */
}

.dark td {
    border-bottom: 1px solid #4b5563;
    /* border-gray-600 */
}

.dark .tab-button {
    background-color: #4b5563;
    /* gray-600 */
    color: #e5e7eb;
    /* gray-200 */
}

.dark .tab-button.active {
    background-color: #60a5fa;
    /* blue-400 */
    color: #1f2937;
}

.dark .tab-button:hover:not(.active) {
    background-color: #6b7280;
    /* gray-500 */
}


/* Tab Button Styles (common) */
.tab-button {
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    cursor: pointer;
    border: none;
    outline: none;
}


/* Rarity colors for backgrounds - these are used by the rarity-X classes on the <td> */
/* These are the same as before, but now applied to the cell background */
.rarity-Common {
    background-color: #e0e0e0;
}

/* Lighter Silver/Light Gray */
.rarity-Uncommon {
    background-color: #a7f3d0;
}

/* Lighter Light Green */
.rarity-Rare {
    background-color: #bfdbfe;
}

/* Lighter Light Blue */
.rarity-Epic {
    background-color: #e9d5ff;
}

/* Lighter Plum/Light Purple */
.rarity-Legendary {
    background-color: #fcd34d;
}

/* Lighter Gold */
.rarity-Mythic {
    background-color: #fca5a5;
}

/* Lighter Tomato/Orange-Red */
.rarity-Demonic {
    background-color: #ef4444;
}

/* Brighter Red */
.rarity-Ancient {
    background-color: #60a5fa;
}

/* Brighter Steel Blue */

/* Ensure text color is readable on rarity backgrounds - these are the text colors */
/* These are now applied directly to the td.rarity-X classes */
.rarity-Common,
.rarity-Uncommon,
.rarity-Rare,
.rarity-Epic,
.rarity-Legendary,
.rarity-Mythic {
    color: #1f2937;
    /* Dark text for lighter backgrounds */
}

/* For Demonic and Ancient, text is white as background is dark */
.rarity-Demonic,
.rarity-Ancient {
    color: #ffffff;
}


/* Spinner */
.spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border-left-color: #1f2937;
    /* gray-800 */
    animation: spin 1s ease infinite;
    margin: 2rem auto;
}

.dark .spinner {
    border-left-color: #e5e7eb;
    /* gray-200 */
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Styles for expandable unit details */
.unit-row.expanded {
    border-bottom: none;
    /* Remove border from expanded row */
}

.unit-details-row td {
    border-top: none;
    /* Remove top border from detail row */
    padding-top: 0.5rem;
    /* Adjust padding */
    padding-bottom: 0.5rem;
}

.unit-details-row {
    animation: fadeIn 0.3s ease-out;
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Style for mod checkboxes and max stats checkbox in detailed view */
#modCheckboxesContainer label,
#toggleMaxLevelUnit+label {
    /* Removed #toggleMaxStats + label */
    margin-right: 1rem;
    font-size: 0.95rem;
    /* text-base for labels */
    color: #000000;
    /* Black text for better readability in light mode */
}

.dark #modCheckboxesContainer label,
.dark #toggleMaxLevelUnit+label {
    /* Removed .dark #toggleMaxStats + label */
    color: #e5e7eb;
    /* Light text color for labels in dark mode */
}

#modCheckboxesContainer input[type="checkbox"],
#toggleMaxLevelUnit {
    /* Removed #toggleMaxStats */
    cursor: pointer;
}

/* Specific styling for rarity headers within mod checkboxes */
#modCheckboxesContainer h4 {
    font-size: 1rem;
    /* text-base for rarity headers */
    font-weight: 700;
    /* font-bold */
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
    color: #000000;
    /* Black text for light mode */
}

.dark #modCheckboxesContainer h4 {
    color: #f9fafb;
    /* Even lighter for headings in dark mode */
}

/* Make the mod checkboxes container vertically scrollable */
#modCheckboxesContainer {
    max-height: 300px;
    /* Adjust as needed */
    overflow-y: auto;
    padding-right: 10px;
    /* Add some padding for the scrollbar */
}

/* Improve general text contrast in the detail view */
.unit-details-row ul li {
    font-size: 0.95rem;
    /* Consistent size for list items */
    color: #000000;
    /* Black text for better readability in light mode */
}

.dark .unit-details-row ul li {
    color: #e5e7eb;
    /* Lighter text for better readability in dark mode */
}

.unit-details-row h3 {
    font-size: 1.125rem;
    /* text-lg for subheadings */
    font-weight: 600;
    /* font-semibold */
    color: #000000;
    /* Black for headings in light mode */
}

.dark .unit-details-row h3 {
    color: #f9fafb;
    /* Even lighter for headings in dark mode */
}

/* Input and Select elements styling */
input[type="text"],
input[type="number"],
select {
    font-size: 0.95rem;
    /* Consistent font size for inputs */
    /* Ensure borders are clearly visible in light mode */
    border: 1px solid #6b7280;
    /* gray-500, darker for better visibility in light mode */
    color: #000000;
    /* Black text for inputs in light mode */
    background-color: #ffffff;
    /* White background for inputs in light mode */
}

.light select {
    color: #000000;
    /* Black text for select in light mode */
    font-weight: 600;
    /* Thicker font for select in light mode */
}

.light select option {
    color: #000000;
    /* Black text for options in light mode */
    background-color: #ffffff;
    /* White background for options in light mode */
    font-weight: 600;
    /* Thicker font for options in light mode */
}

.dark input[type="text"],
.dark input[type="number"],
.dark select {
    border-color: #6b7280;
    /* gray-500 for dark mode, visible */
    color: #e5e7eb;
    /* Light text for inputs in dark mode */
    background-color: #374151;
    /* gray-700 background for inputs in dark mode */
}

/* Placeholder text color */
::placeholder {
    color: #000000;
    /* Black for better contrast in light mode */
    opacity: 1;
    /* Firefox fix */
}

.dark::placeholder {
    color: #9ca3af;
    /* gray-400, lighter for better contrast in dark mode */
}

/* New styles for the header image */
.header-image {
    width: 80px;
    /* Adjust size as needed */
    height: 80px;
    /* Keep aspect ratio */
    object-fit: cover;
    /* Cover the area, crop if necessary */
    border: 2px solid #3b82f6;
    /* Blue border */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Subtle shadow */
}

.dark .header-image {
    border-color: #60a5fa;
    /* Lighter blue border in dark mode */
}

/* Adjust header layout for better alignment */
header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    /* Allow wrapping on smaller screens */
    gap: 1rem;
    /* Space between items */
}

header h1 {
    margin-bottom: 0;
    /* Remove default margin */
}

/* Adjust navigation tabs for better spacing */
nav ul {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    /* Space between tabs */
}

/* Modal / Onboard styles added for ui_onboard.js */
.fixed {
    position: fixed;
}

.inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.z-50 {
    z-index: 50;
}

.bg-opacity-50 {
    background-color: rgba(0, 0, 0, 0.5);
}

.max-w-2xl {
    max-width: 42rem;
}

.rounded-lg {
    border-radius: 0.5rem;
}

.shadow-lg {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.dark .rounded-lg {
    background-color: #1f2937;
}

/* Slight polish for hero and quick panels */
.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.how-panel p {
    margin-top: 0.25rem;
}

/* Improve tab button focus states */
.tab-button:focus {
    outline: 3px solid rgba(59, 130, 246, 0.25);
}