:root {
    --bg-color: #f8fafc;
    --card-bg: #ffffff;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --accent-color: #0284c7;
    --accent-euro: #10b981;
    /* Changed from Purple to Emerald Green */
    --border-color: #e2e8f0;
    --table-header: #f1f5f9;
    --footer-bg: #f1f5f9;
    --tech-color: #38bdf8;
    --comm-color: #059669;
    /* Darker green for Sector branding */
    --cons-color: #fbbf24;
    --text-up: #4ade80;
    --text-down: #f87171;
}
/* Automatically switch variables if System is set to Dark */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #0f172a;
        --card-bg: #1e293b;
        --text-primary: #f8fafc;
        --text-secondary: #94a3b8;
        --accent-color: #38bdf8;
        --accent-euro: #34d399;
        --border-color: #334155;
        --table-header: rgba(15, 23, 42, 0.5);
        --footer-bg: #1e293b;
        --comm-color: #10b981;
        --text-up: #00ff88;
        --text-down: #ff4d4d;
    }
}
body {
    /* Layer 1 (Top): The dynamic tint */
    /* Layer 2 (Bottom): The solid theme background variable */
    background: linear-gradient(var(--tint-color, transparent), var(--tint-color, transparent)), var(--bg-color);

    /* This ensures the background color fills the screen even when scrolling */
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;

    color: var(--text-primary);
    margin: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;

    /* Smooth transition for the tint change */
    transition: background 0.4s ease-in-out;
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    flex: 1;
    width: 100%;
}

header {
    text-align: center;
    margin-bottom: 16px;
}

select {
    background-color: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.9rem;
}


footer {
    margin-top: auto;
    padding: 20px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.8rem;
}


a {
    /* KEY FIX: ensures the box only wraps the text */
    display: inline-block;
    width: fit-content;

    color: var(--accent-color);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease, border-bottom 0.2s ease;
    border-bottom: 1px solid transparent;
}

/* Hover state remains the same, but now respects the text width */
a:hover {
    color: var(--tech-color);
    border-bottom: 1px solid var(--tech-color);
}


.green {
    color: var(--text-up) !important;
}
.red {
    color: var(--text-down) !important;
}

.tag {
    background: rgba(56, 189, 248, 0.1);
    color: var(--tech-color);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    text-wrap: nowrap;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr; 
    gap: 24px;
    width: 100%;
    max-width: 100vw; /* Hard limit to viewport width */
    overflow: hidden; /* Prevent child elements from pushing the boundary */
}

/* Apply to the direct children of the grid */
.dashboard-grid > div {
    min-width: 0; 
}
@media (min-width: 1024px) {
    .dashboard-grid {
        /* Table column is roughly 2.5x wider than the activity sidebar */
        grid-template-columns: minmax(0, 2fr) 1fr; 
        gap: 32px;
    }

}