/* General Body Styles */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Modern font */
    background-color: #1e2128; /* Dark background */
    color: #e0e0e0; /* Light text */
    margin: 0;
    padding: 20px;
}

h1 {
    text-align: center;
    color: #58a6ff; /* Lighter blue */
    margin-bottom: 30px;
    font-weight: 600;
}

/* Optional Tabs Styling */
.tabs {
    text-align: center;
    margin-bottom: 30px;
}

table {
    width: 100%;
    border-collapse: collapse;
    background-color: #3c4049; /* Darker background for table */
}

th, td {
    border: 1px solid #555;
    padding: 8px 12px;
    text-align: center;
    min-width: 80px; /* Ensure columns have some width */
}

th {
    background-color: #4a4e5a; /* Header background */
    color: #e0e0e0;
}

tbody tr:nth-child(odd) {
    background-color: #40444e;
}
tbody tr:nth-child(even) {
    background-color: #3c4049;
}

/* Score Colors */
.score-positive-2, .score-positive-1 { background-color: #2a6fdb; color: white; } /* Blue for positive */
.score-negative-2, .score-negative-1 { background-color: #d93025; color: white; } /* Red for negative */
.score-neutral-0 { background-color: #6c757d; color: white; } /* Grey for neutral */

/* Bias Text Colors (Optional) */
.bias-very-bullish, .bias-bullish { color: #4caf50; font-weight: bold; } /* Green */
.bias-very-bearish, .bias-bearish { color: #f44336; font-weight: bold; } /* Red */
.bias-neutral { color: #ffeb3b; } /* Yellow */

/* Add styles for tabs, buttons etc. as needed */
.tabs button {
    padding: 10px 20px;
    border: none;
    background-color: #30363d; /* Darker button */
    color: #c9d1d9; /* Lighter grey text */
    cursor: pointer;
    margin: 0 5px;
    border-radius: 6px;
    font-size: 1rem;
    transition: background-color 0.3s ease;
    border-bottom: 3px solid transparent;
}

.tabs button.active {
    background-color: #30363d;
    color: #e0e0e0;
    border-bottom: 3px solid #58a6ff; /* Blue underline for active */
}
.tabs button:hover {
    background-color: #424a53;
}

/* Style links if assets are clickable */
td a {
    color: #61dafb;
    text-decoration: none;
}
td a:hover {
    text-decoration: underline;
}

/* Card Container */
#asset-cards-container {
    display: grid; /* Use grid for better control and responsiveness */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* Responsive columns */
    gap: 25px; /* Space between cards */
    max-width: 1200px; /* Optional: Max width for larger screens */
    margin: 0 auto; /* Center the container */
}

.loading-message {
    color: #8b949e;
    text-align: center;
    font-style: italic;
    grid-column: 1 / -1; /* Span full width if grid is active */
}

/* Individual Card Styling */
.asset-card {
    background-color: #2d333b; /* Slightly lighter card background */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* Softer shadow */
    overflow: hidden; /* Ensure content stays within rounded corners */
    display: flex;
    flex-direction: column;
}

/* Card Header */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: #373e47; /* Slightly different header background */
    border-bottom: 1px solid #444c56;
}

.asset-name {
    font-size: 1.4em;
    font-weight: 600;
    color: #c9d1d9;
}

.bias-score-container {
    display: flex;
    align-items: center;
    gap: 15px;
}

.asset-bias {
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.95em;
    color: #1c2128; /* Dark text for contrast on colored backgrounds */
}

.asset-score {
    font-size: 1.2em;
    font-weight: 700;
    background-color: #444c56;
    color: #e0e0e0;
    padding: 5px 10px;
    border-radius: 5px;
    min-width: 30px;
    text-align: center;
}

/* Card Content - Grid for Factors */
.factor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); /* Responsive factor columns */
    gap: 15px;
    padding: 20px;
}

/* Individual Factor Item */
.factor-item {
    background-color: #373e47; /* Background for each factor */
    padding: 10px;
    border-radius: 6px;
    display: flex;
    flex-direction: column; /* Stack label and score vertically */
    align-items: center; /* Center items */
    gap: 5px;
    border: 1px solid #444c56;
    min-height: 60px; /* Give items some consistent height */
    justify-content: center;
}

.factor-label {
    font-size: 0.85em;
    color: #8b949e; /* Dimmed label color */
    text-transform: uppercase;
    font-weight: 500;
}

.factor-score {
    font-size: 1.1em;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    color: #ffffff; /* White text generally works */
    min-width: 25px; /* Ensure badge-like appearance */
    text-align: center;
}

/* Score Colors (Applied to .factor-score spans) */
.score-positive-2 { background-color: #3FB950; color: white; } /* Strong Green */
.score-positive-1 { background-color: #2EA043; color: white; } /* Green */
.score-negative-1 { background-color: #F85149; color: white; } /* Red */
.score-negative-2 { background-color: #DA3633; color: white; } /* Strong Red */
.score-neutral-0 { background-color: #6e7681; color: white; } /* Grey */

/* Bias Text Colors (Applied to .asset-bias spans) */
.bias-very-bullish { background-color: #3FB950; } /* Strong Green */
.bias-bullish { background-color: #2EA043; }      /* Green */
.bias-very-bearish { background-color: #DA3633;} /* Strong Red */
.bias-bearish { background-color: #F85149; }     /* Red */
.bias-neutral { background-color: #6e7681; }    /* Grey */

/* Responsive Adjustments (Example) */
@media (max-width: 400px) {
    #asset-cards-container {
        grid-template-columns: 1fr; /* Stack cards fully on very small screens */
    }
    .factor-grid {
         grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Adjust factor grid */
         gap: 10px;
         padding: 15px;
    }
    .asset-name { font-size: 1.2em; }
    .asset-bias { font-size: 0.9em; padding: 3px 8px;}
    .asset-score { font-size: 1.1em; }
}