// --- 1. ABSTRACTS (Variables & Mixins) ---

// Variables
$primary-dark: #121212; 
$secondary-dark: #181818; 
$accent-green: #1db954; 
$text-light: #fefefe;
$text-subtle: #b3b3b3;
$sidebar-width: 220px;
$header-height: 70px;
$base-padding: 1.5rem;
$border-radius: 8px;

// Status Colors
$color-success: #2ecc71; 
$color-warning: #f1c40f; 

// Mixin for clean transitions
@mixin transition($property: all, $duration: 0.3s) {
    transition: $property $duration ease-in-out;
}

// Mixin for centering flex items
@mixin flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

// Mixin for modern light/glow effect on hover
@mixin hover-glow {
    &:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 15px rgba($accent-green, 0.2);
    }
}


// --- 2. BASE STYLES ---

* {
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif; 
    margin: 0;
    background-color: $primary-dark;
    color: $text-light;
}


// --- 3. LAYOUT (Wrapper, Sidebar, Main Area) ---

.dashboard-wrapper {
    display: flex;
    min-height: 100vh;
}

// Sidebar Styling
.sidebar {
    width: $sidebar-width;
    background-color: $secondary-dark; 
    flex-shrink: 0;
    padding: $base-padding 0;

    .sidebar-logo {
        padding: 0 $base-padding 1rem;
        margin-bottom: 1rem;
        border-bottom: 1px solid rgba($text-subtle, 0.1);
        display: flex;
        align-items: center;

        .logo-icon { font-size: 1.5rem; margin-right: 0.5rem; color: $accent-green; }
        .logo-text { font-size: 1.2rem; font-weight: 700; }
    }

    .main-nav {
        ul { list-style: none; padding: 0; margin: 0; }
        
        li {
            a {
                display: flex;
                align-items: center;
                padding: 0.8rem $base-padding;
                color: $text-subtle;
                text-decoration: none;
                @include transition(color, background-color);

                .icon { margin-right: 12px; font-size: 1.1rem; }

                &:hover {
                    color: $text-light;
                }
            }

            &.active a {
                color: $text-light;
                background-color: darken($secondary-dark, 5%);
                border-left: 3px solid $accent-green; 
            }
        }
    }
}

// Main Area Styling
.main-area {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

// Header Styling
.dashboard-header {
    height: $header-height;
    background-color: $secondary-dark;
    padding: 0 $base-padding;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);

    h1 {
        font-size: 1.6rem;
        margin: 0;
        color: $accent-green;
    }

    .search-bar {
        display: flex;
        input {
            padding: 8px 15px;
            border: 1px solid rgba($text-subtle, 0.3);
            background-color: $primary-dark;
            color: $text-light;
            border-radius: $border-radius 0 0 $border-radius;
            width: 300px;
            &:focus { outline: none; border-color: $accent-green; }
        }
        .search-btn {
            background-color: $accent-green;
            color: $text-light;
            border: none;
            padding: 8px 15px;
            border-radius: 0 $border-radius $border-radius 0;
            cursor: pointer;
        }
    }

    .user-profile {
        display: flex;
        align-items: center;
        .notification { margin-right: 20px; color: $text-subtle; cursor: pointer; }
        .avatar {
            width: 35px;
            height: 35px;
            line-height: 35px;
            text-align: center;
            background-color: lighten($primary-dark, 20%);
            color: $text-light;
            border-radius: 50%;
            font-weight: bold;
        }
    }
}

.dashboard-content {
    padding: $base-padding;
    flex-grow: 1;
}

.section-title {
    margin: 1.5rem 0 1rem;
    font-size: 1.4rem;
    color: $text-light;
}


// --- 4. COMPONENTS (KPI Cards & Album Grid) ---

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: $base-padding;
    margin-bottom: $base-padding;
}

.kpi-card {
    background-color: $secondary-dark;
    padding: $base-padding;
    border-radius: $border-radius;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    @include transition(transform);
    border-left: 3px solid transparent; 

    @include hover-glow; 

    .kpi-label {
        font-size: 0.9rem;
        color: $text-subtle;
        margin-bottom: 0.5rem;
    }

    .kpi-value {
        font-size: 2.2rem;
        font-weight: 700;
        color: $text-light;
    }
    
    .kpi-trend {
        font-size: 0.85rem;
        margin-top: 0.5rem;
        font-weight: 600;
        
        &.success { color: $color-success; }
        &.warning { color: $color-warning; }
        &.neutral { color: $text-subtle; }
    }
    
    // Specific card styling
    &.stat-total { border-left-color: $accent-green; }
    &.stat-royalty { border-left-color: $color-warning; }
}

.album-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: $base-padding;
    margin-bottom: $base-padding;
}

.album-card {
    @extend .kpi-card; // Inherit basic card styling (background, shadow, glow)
    padding: $base-padding;
    text-align: center;
    border-left: none; // Remove left border inherited from kpi-card for a cleaner look

    .album-title {
        font-size: 1.2rem;
        color: $text-light;
        margin: 0 0 0.25rem;
    }
    .album-date {
        font-size: 0.8rem;
        color: $text-subtle;
        margin-bottom: 1rem;
    }
}


// --- 5. COMPONENTS (Chart, Track List, Activity Feed) ---

.content-row {
    display: flex;
    gap: $base-padding;
    margin-top: $base-padding;
    align-items: stretch; /* FIX: Ensures panels align to the same height */
}

.chart-panel, .activity-panel {
    background-color: $secondary-dark;
    padding: $base-padding;
    border-radius: $border-radius;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
}

.chart-panel {
    flex: 2; 
    min-height: 400px; // Base height for top row chart
    
    // Styles for the Streams Trend visual
    .streams-chart-container {
        background-color: $primary-dark; 
        border: 1px solid rgba($accent-green, 0.1); 
        height: 300px;
        margin-top: 1rem;
        padding: 15px;
        border-radius: $border-radius;
        position: relative;
        overflow: hidden;
        
        // Mimic grid lines
        background-image: 
            linear-gradient(to right, rgba($accent-green, 0.1) 1px, transparent 1px),
            linear-gradient(to bottom, rgba($accent-green, 0.1) 1px, transparent 1px);
        background-size: 10% 30px; 
        
        @include flex-center; 
        flex-direction: column; 

        .chart-label-coming-soon {
            position: absolute;
            bottom: 15px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.8rem;
            color: rgba($text-subtle, 0.5);
            font-weight: 600;
            text-transform: uppercase;
        }
    }
    
    // Demographics stats styling (used in the second chart-panel instance)
    .demographic-stats {
        display: flex;
        justify-content: space-around;
        margin-top: 1.5rem;
        padding-top: 1rem;
        border-top: 1px solid rgba($text-subtle, 0.1);

        .mini-stat {
            text-align: center;
            .kpi-value { 
                font-size: 1.5rem; 
                font-weight: 700;
                color: $text-light;
            }
            .kpi-label {
                font-size: 0.8rem;
                color: $text-subtle;
            }
        }
    }
}

.activity-panel {
    flex: 1; 
    min-height: 400px; // Base height for top row track list (adjust this if needed for second row)
    
    .track-list {
        list-style: none;
        padding: 0;
        
        .track-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid rgba($text-subtle, 0.1);
            @include transition(background-color);
            
            &:last-child { border-bottom: none; }

            .track-rank { font-weight: bold; color: $accent-green; margin-right: 10px; }
            .track-info { flex-grow: 1; font-size: 0.95rem; }
            .track-streams { font-size: 0.8rem; color: $text-subtle; }

            &:hover {
                background-color: rgba($accent-green, 0.1);
                padding-left: 10px;
            }
        }
    }
}

// Activity Feed Styles
.activity-feed-list {
    list-style: none;
    padding: 0;
    margin-top: 1rem;
    
    .activity-item {
        display: flex;
        align-items: flex-start;
        padding: 10px 0;
        border-bottom: 1px solid rgba($text-subtle, 0.1);
        font-size: 0.9rem;
        color: $text-subtle;

        &:last-child { border-bottom: none; }