/* ==========================================================================
   III. DASHBOARD TAB (`#dashboard-tab`)
   ========================================================================== */

/* Override card radius variable for dashboard to ensure sharp corners */
#dashboard-tab {
    --card-radius: 0;
    --card-radius-sm: 0;
    --card-radius-lg: 0;
}

/* 
   #totalDisorders, #totalSymptoms, #totalEffects, #avgTeaScore 
   These IDs are targets for JavaScript to populate metric values.
   Their visual styling is handled by the shared .tea-card, .metric-value, 
   and .metric-label classes from the component library.
*/

/* Dashboard specific grid layout */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

/* Dashboard metric cards now use the shared .metric-card styles */
/* Ensure metric cards in dashboard have sharp corners */
#dashboard-tab .metric-card {
    border-radius: 0 !important; /* Mindstate: Force sharp corners */
}

/* Ensure dashboard metric values use Open Sans */
#dashboard-tab .metric-card .metric-value {
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 2rem;
    font-weight: 300;
    letter-spacing: -0.04em;
}

/* Top 5 Therapeutic Targets List */
.top-targets-list {
    list-style: none;
    /* padding: 0; Implicit from global reset */
}

/* Mindstate: Simplified target items with minimal styling */
.target-item {
    padding: var(--spacing-md) var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    background: #FFFFFF; /* Mindstate: White background */
    border-radius: 0; /* Mindstate: Sharp corners */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* Mindstate: Minimal shadow */
    border: 1px solid #F4F4F4; /* Mindstate: Light border */
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all var(--transition-fast) ease;
    position: relative;
    overflow: hidden; /* For the ::before animated highlight */
}

/* Mindstate: Removed animated highlight - too decorative */
.target-item::before {
    display: none; /* Mindstate: Remove shimmer effect */
}

/* Mindstate: Simplified hover state */
.target-item:hover {
    transform: translateY(-1px) translateX(2px); /* Mindstate: Reduced movement */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); /* Mindstate: Subtle shadow */
    background: #FAFAFA; /* Mindstate: Very light gray on hover */
}

/* Mindstate: Clean active state without inset shadows */
.target-item:active {
    transform: translateY(0) translateX(0); /* Push back down on click */
    box-shadow: none; /* Mindstate: Remove shadow when pressed */
    background: #F4F4F4; /* Mindstate: Light gray when pressed */
}

.target-info {
    flex: 1; /* Allow text content to take available space */
}

.target-name {
    font-weight: 600;
    color: #000000; /* Mindstate: Pure black */
    margin-bottom: var(--spacing-xs);
    letter-spacing: -0.02em; /* Mindstate: Tighter letter spacing */
}

.target-chapter {
    font-size: 0.9rem;
    color: #8B9187; /* Mindstate: Medium gray */
}

.target-score {
    text-align: right; /* Align score section to the right */
}

/* Mindstate: Updated score value styling */
.score-value { /* This class is also used in .metric-card, ensure consistency or specificity if needed */
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 1.2rem; /* Slightly smaller than main metric-value for this context */
    font-weight: 300; /* Mindstate: Lighter weight for numbers */
    color: #6B8E23; /* Mindstate: Data green */
    letter-spacing: -0.04em; /* Mindstate: Tighter letter spacing for numbers */
    /* margin: 0; /* Reset margin if inherited */
}

/* Mindstate: Simplified score bar */
.score-bar { /* Container for the score visualization */
    width: 100px; /* Fixed width for the bar */
    height: 8px;
    background: #EBEBEB; /* Mindstate: Light gray */
    border-radius: 0; /* Mindstate: Sharp corners */
    overflow: hidden; /* To contain the .score-fill */
    margin-top: var(--spacing-xs);
    box-shadow: none; /* Mindstate: Remove inset shadow */
}

/* Mindstate: Solid color fill */
.score-fill { /* The actual colored bar indicating score */
    height: 100%;
    background: #6B8E23; /* Mindstate: Data green solid color */
    /* width will be set by JS */
    transition: width var(--transition-medium) ease;
    position: relative;
    box-shadow: none; /* Mindstate: Remove shadow on fill */
}

/* 
   #effectCategoriesChart 
   This ID is a target for JavaScript to render a chart.
   Its visual styling (container properties) is handled by the shared 
   .chart-container class found in "II. Shared Components/Utilities".
*/

/* Make the effect categories chart clickable */
#effectCategoriesChart {
    cursor: pointer;
}

/* Ensure tea-card styling on dashboard */
/* Mindstate: Updated tea-card styling with solid colors */
#dashboard-tab .tea-card {
    background: #FFFFFF; /* Mindstate: White background */
    border-radius: 0; /* Mindstate: Sharp corners */
    padding: var(--card-padding);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* Mindstate: Minimal shadow */
    border: 1px solid #F4F4F4; /* Mindstate: Light border */
    position: relative;
    overflow: hidden;
    transition: var(--card-transition);
    color: var(--color-text);
    line-height: 1.6;
}

#dashboard-tab .tea-card h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #000000; /* Mindstate: Pure black */
    margin: 0 0 var(--spacing-md) 0;
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid #EBEBEB; /* Mindstate: Light gray divider */
    letter-spacing: -0.02em; /* Mindstate: Tighter letter spacing */
}

/* Two column layout for dashboard */
#dashboard-tab .two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    align-items: start;
}

/* Chart container styling */
/* Mindstate: Simplified chart container without inset shadows */
#dashboard-tab .chart-container {
    position: relative;
    height: 400px;
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-md);
    background: #FFFFFF; /* Mindstate: White background */
    border-radius: 0 !important; /* Mindstate: Sharp corners - force override */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* Mindstate: Minimal shadow */
    border: 1px solid #F4F4F4; /* Mindstate: Light border */
}

@media (max-width: 768px) {
    #dashboard-tab .two-column {
        grid-template-columns: 1fr;
    }
}