/* ========================================
   DASHBOARD.CSS - Financial Mining Dashboard
   Aura - Dashboard de Mineração
   ======================================== */

/* AIDEV-NOTE: Dashboard-specific styles for financial mining dashboard */
/* Follows KISS principle - simple, clean layout using CSS Grid */
/* Reuses CSS variables from main.css (DRY principle) */

/* ========================================
   ROOT VARIABLES
   ======================================== */

:root {
    /* Financial Dashboard Colors */
    --dashboard-primary: #2c3e50;
    --dashboard-secondary: #34495e;
    --dashboard-accent: #3498db;
    --dashboard-success: #27ae60;
    --dashboard-warning: #f39c12;
    --dashboard-danger: #e74c3c;

    /* Layout Dimensions */
    --header-height: 80px;
    --sidebar-width-desktop: 35%;
    --sidebar-width-tablet: 300px;
    --sidebar-width-mobile: 100%;

    /* Spacing */
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 20px; /* Increased 25% from 16px */
    --spacing-lg: 30px; /* Increased 25% from 24px */
    --spacing-xl: 40px; /* Increased 25% from 32px */

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Z-index layers */
    --z-header: 1000;
    --z-sidebar: 900;
    --z-overlay: 800;
}

/* ========================================
   RESET AND BASE
   ======================================== */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* ========================================
   DASHBOARD CONTAINER
   ======================================== */

/* AIDEV-NOTE: Main container using flexbox for header, body, footer layout */
.dashboard-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #f8f9fa;
}

/* ========================================
   HEADER
   ======================================== */

/* AIDEV-NOTE: Sticky header with toggle button, title, and actions */
.dashboard-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: white;
    border-bottom: 1px solid var(--cor-border, #e0e0e0);
    height: var(--header-height);
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.dashboard-header .header-content {
    flex: 1;
}

/* AIDEV-NOTE: Fixed width for header-content on desktop to align with sidebar */
@media (min-width: 1024px) {
    .dashboard-header .header-content {
        flex: 0 0 auto;
        /* Match sidebar width: 35% viewport minus toggle button (40px) minus gaps (20px left of title + 20px right of title) */
        width: calc(35% - 40px - var(--spacing-md));
    }
}

.dashboard-header h1 {
    font-size: 24px;
    font-weight: 600;
    color: var(--dashboard-primary);
    margin: 0 0 4px 0;
}

.dashboard-header .subtitle {
    font-size: 14px;
    color: var(--cor-text-light, #6c757d);
    margin: 0;
}

.dashboard-header .header-actions {
    display: flex;
    gap: var(--spacing-sm);
}

/* Hamburger Toggle Button */
.sidebar-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 30px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 10;
}

.sidebar-toggle span {
    width: 100%;
    height: 3px;
    background: var(--dashboard-primary);
    border-radius: 2px;
    transition: var(--transition-fast);
}

.sidebar-toggle:hover span {
    background: var(--dashboard-accent);
}

/* Action Buttons */
.btn-secondary {
    padding: var(--spacing-xs) var(--spacing-md);
    background: white;
    border: 1px solid var(--cor-border, #e0e0e0);
    border-radius: 4px;
    color: var(--dashboard-primary);
    text-decoration: none;
    font-size: 14px;
    transition: var(--transition-fast);
}

.btn-secondary:hover {
    background: #f8f9fa;
    border-color: var(--dashboard-accent);
    color: var(--dashboard-accent);
}

/* ========================================
   BODY GRID LAYOUT
   ======================================== */

/* AIDEV-NOTE: CSS Grid layout - Sidebar + Main content area */
.dashboard-body {
    display: grid;
    gap: 0;
    position: relative;
    /* AIDEV-NOTE: Removed flex: 1 to allow explicit height constraint in media query for independent scrolling */
}

/* Desktop Layout (≥1024px): 35% sidebar + 65% main */
@media (min-width: 1024px) {
    /* AIDEV-NOTE: Height constraint enables independent scrolling - parent must have explicit height */
    .dashboard-body {
        grid-template-columns: var(--sidebar-width-desktop) 1fr;
        grid-template-areas: "sidebar main";
        height: calc(100vh - var(--header-height));  /* Constrain height to viewport minus header */
    }

    /* AIDEV-NOTE: height: 100% fills parent, enabling overflow-y: auto to work correctly */
    .sidebar-left {
        grid-area: sidebar;
        height: 100%;  /* Fill parent height for independent scrolling */
    }

    .dashboard-main {
        grid-area: main;
        height: 100%;  /* Fill parent height for independent scrolling */
    }
}

/* Tablet Layout (768-1023px): Collapsible sidebar */
@media (min-width: 768px) and (max-width: 1023px) {
    .dashboard-body {
        grid-template-columns: 1fr;
        grid-template-areas: "main";
    }

    .sidebar-toggle {
        display: flex;
    }

    .sidebar-left {
        position: fixed;
        left: calc(-1 * var(--sidebar-width-tablet) - 20px);
        top: var(--header-height);
        width: var(--sidebar-width-tablet);
        height: calc(100vh - var(--header-height));
        z-index: var(--z-sidebar);
        transition: left var(--transition-normal);
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
    }

    .sidebar-left.open {
        left: 0;
    }

    .dashboard-main {
        grid-area: main;
    }
}

/* Mobile Layout (<768px): Full width, drawer sidebar */
@media (max-width: 767px) {
    .dashboard-body {
        grid-template-columns: 1fr;
        grid-template-areas: "main";
    }

    .sidebar-toggle {
        display: flex;
    }

    .sidebar-left {
        position: fixed;
        left: -100%;
        top: var(--header-height);
        width: var(--sidebar-width-mobile);
        height: calc(100vh - var(--header-height));
        z-index: var(--z-sidebar);
        transition: left var(--transition-normal);
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
    }

    .sidebar-left.open {
        left: 0;
    }

    .dashboard-main {
        grid-area: main;
    }

    .dashboard-header h1 {
        font-size: 18px;
    }

    .dashboard-header .subtitle {
        font-size: 12px;
    }

    .dashboard-header .header-actions {
        display: none;
    }
}

/* ========================================
   LEFT SIDEBAR - SCENARIO CONFIGURATOR
   ======================================== */

/* AIDEV-NOTE: Sidebar for 10 InteractiveEqualizerCharts */
.sidebar-left {
    background: white;
    border-right: 1px solid var(--cor-border, #e0e0e0);
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--cor-border, #e0e0e0);
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
}

.sidebar-header h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--dashboard-primary);
    margin: 0;
}

.sidebar-close {
    display: none;
    background: none;
    border: none;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    color: var(--cor-text-light, #6c757d);
    padding: 0;
    width: 32px;
    height: 32px;
    transition: var(--transition-fast);
}

.sidebar-close:hover {
    color: var(--dashboard-danger);
}

/* Show close button on mobile/tablet */
@media (max-width: 1023px) {
    .sidebar-close {
        display: block;
    }
}

.sidebar-content {
    padding: var(--spacing-md);
}

/* Scenario Sections (Collapsible) */
.scenario-section {
    margin-bottom: var(--spacing-md);
    border: 1px solid var(--cor-border, #e0e0e0);
    border-radius: 8px;
    overflow: hidden;
    background: white;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background: #f8f9fa;
    border: none;
    border-bottom: 1px solid var(--cor-border, #e0e0e0);
    cursor: pointer;
    text-align: left;
    transition: var(--transition-fast);
}

.section-header:hover {
    background: #e9ecef;
}

.section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--dashboard-primary);
}

.section-icon {
    font-size: 12px;
    color: var(--cor-text-light, #6c757d);
    transition: transform var(--transition-fast);
}

.section-header[aria-expanded="false"] .section-icon {
    transform: rotate(-90deg);
}

.section-content {
    padding: var(--spacing-md);
}

.section-header[aria-expanded="false"] + .section-content {
    display: none;
}

/* Chart Placeholders */
.chart-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px dashed var(--cor-border, #e0e0e0);
    border-radius: 4px;
    padding: var(--spacing-md);
    text-align: center;
}

.placeholder-text {
    font-weight: 600;
    color: var(--dashboard-secondary);
    margin: 0 0 var(--spacing-xs) 0;
}

.chart-placeholder small {
    font-size: 12px;
    color: var(--cor-text-light, #6c757d);
}

/* ========================================
   MAIN CONTENT AREA
   ======================================== */

/* AIDEV-NOTE: Main dashboard content with tabs */
.dashboard-main {
    padding: var(--spacing-lg);
    overflow-y: auto;
}

@media (max-width: 767px) {
    .dashboard-main {
        padding: var(--spacing-md);
    }
}

/* ========================================
   TAB SYSTEM
   ======================================== */

/* AIDEV-NOTE: Tab navigation for Aura and Unidades views */
.tab-system {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.tab-header {
    display: flex;
    border-bottom: 2px solid var(--cor-border, #e0e0e0);
    background: #f8f9fa;
}

.tab-button {
    flex: 1;
    padding: var(--spacing-md) var(--spacing-lg);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 16px;
    font-weight: 600;
    color: var(--cor-text-light, #6c757d);
    cursor: pointer;
    transition: var(--transition-fast);
    position: relative;
    top: 2px;
}

.tab-button:hover {
    background: white;
    color: var(--dashboard-primary);
}

.tab-button.active {
    background: white;
    color: var(--dashboard-accent);
    border-bottom-color: var(--dashboard-accent);
}

.tab-content {
    display: none;
    padding: var(--spacing-lg);
}

.tab-content.active {
    display: block;
}

@media (max-width: 767px) {
    .tab-button {
        font-size: 14px;
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .tab-content {
        padding: var(--spacing-md);
    }
}

/* ========================================
   SECTIONS AND GRIDS
   ======================================== */

.section-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--dashboard-primary);
    margin: 0 0 var(--spacing-md) 0;
}

.kpi-section,
.chart-section {
    margin-bottom: 50px; /* Increased 25% from 40px (was --spacing-xl at 32px, now 40px * 1.25 = 50px) */
}

/* KPI Grid */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg); /* Using lg instead of md for 25% more spacing */
}

.kpi-card-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
    border: 1px solid var(--cor-border, #e0e0e0);
    border-radius: 8px;
    padding: var(--spacing-md);
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: var(--transition-fast);
}

.kpi-card-placeholder:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Chart Cards */
.chart-card {
    background: white;
    border: 1px solid var(--cor-border, #e0e0e0);
    border-radius: 8px;
    padding: var(--spacing-lg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: var(--transition-fast);
}

.chart-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.chart-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--dashboard-primary);
    margin: 0 0 var(--spacing-md) 0;
}

.chart-placeholder-large,
.chart-placeholder-medium {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px dashed var(--cor-border, #e0e0e0);
    border-radius: 4px;
    padding: var(--spacing-xl);
    text-align: center;
}

.chart-placeholder-large {
    min-height: 300px;
}

.chart-placeholder-medium {
    min-height: 250px;
}

/* Chart Grids */
.chart-grid-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg); /* Using lg instead of md for 25% more spacing */
}

.chart-grid-2x2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg); /* Using lg instead of md for 25% more spacing */
}

@media (max-width: 767px) {
    .chart-grid-2col,
    .chart-grid-2x2 {
        grid-template-columns: 1fr;
    }
}

/* Empty State */
.empty-state {
    padding: var(--spacing-xl);
    text-align: center;
}

.empty-state h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--dashboard-primary);
    margin: 0 0 var(--spacing-sm) 0;
}

.empty-state p {
    font-size: 14px;
    color: var(--cor-text-light, #6c757d);
    margin: var(--spacing-xs) 0;
}

.text-muted {
    color: var(--cor-text-light, #6c757d);
}

/* ========================================
   FOOTER
   ======================================== */

/* AIDEV-NOTE: Dashboard footer with info and version */
.dashboard-footer {
    background: white;
    border-top: 1px solid var(--cor-border, #e0e0e0);
    padding: var(--spacing-md) var(--spacing-lg);
    margin-top: auto;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
}

.footer-left p,
.footer-right p {
    margin: 0;
    font-size: 12px;
}

.footer-left p:first-child,
.footer-right .version {
    font-weight: 600;
    color: var(--dashboard-primary);
}

.footer-left .text-muted,
.footer-right .text-muted {
    font-size: 11px;
    color: var(--cor-text-light, #6c757d);
}

@media (max-width: 767px) {
    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-sm);
    }
}

/* ========================================
   UTILITIES
   ======================================== */

/* Accessibility - Skip to content link */
.skip-to-content {
    position: absolute;
    left: -9999px;
    z-index: 999;
}

.skip-to-content:focus {
    left: 50%;
    transform: translateX(-50%);
    top: 10px;
    background: var(--dashboard-accent);
    color: white;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: 4px;
    text-decoration: none;
}

/* Focus indicators */
button:focus,
a:focus {
    outline: 2px solid var(--dashboard-accent);
    outline-offset: 2px;
}

/* Scrollbar styling (webkit browsers) */
.sidebar-left::-webkit-scrollbar,
.dashboard-main::-webkit-scrollbar {
    width: 8px;
}

.sidebar-left::-webkit-scrollbar-track,
.dashboard-main::-webkit-scrollbar-track {
    background: #f8f9fa;
}

.sidebar-left::-webkit-scrollbar-thumb,
.dashboard-main::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 4px;
}

.sidebar-left::-webkit-scrollbar-thumb:hover,
.dashboard-main::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}

/* ========================================
   ANIMATIONS
   ======================================== */

/* Fade in animation for tab content */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tab-content.active {
    animation: fadeIn var(--transition-normal);
}

/* Sidebar slide-in animation */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.sidebar-left.open {
    animation: slideIn var(--transition-normal);
}

/* ========================================
   EXCEL FILE UPLOAD (TASK-034)
   ======================================== */

/* AIDEV-NOTE: File upload UI styles for Excel integration */
.excel-upload-section {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.excel-upload-btn {
    position: relative;
    cursor: pointer;
    white-space: nowrap;
}

.excel-upload-btn:hover {
    background: var(--dashboard-accent);
    color: white;
    border-color: var(--dashboard-accent);
}

.excel-upload-btn.loading {
    opacity: 0.6;
    cursor: wait;
}

.file-status {
    font-size: 12px;
    color: var(--cor-text-light, #6c757d);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: 4px;
    transition: var(--transition-fast);
    white-space: nowrap;
}

.file-status.loading {
    color: var(--dashboard-accent);
    background: rgba(52, 152, 219, 0.1);
    animation: pulse 1.5s ease-in-out infinite;
}

.file-status.success {
    color: var(--dashboard-success);
    background: rgba(39, 174, 96, 0.1);
}

.file-status.warning {
    color: var(--dashboard-warning);
    background: rgba(243, 156, 18, 0.1);
}

.file-status.error {
    color: var(--dashboard-danger);
    background: rgba(231, 76, 60, 0.1);
}

/* Loading pulse animation */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

/* Responsive file upload */
@media (max-width: 1023px) {
    .excel-upload-section {
        display: none;
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    .sidebar-toggle,
    .sidebar-close,
    .header-actions,
    .sidebar-left {
        display: none !important;
    }

    .dashboard-body {
        grid-template-columns: 1fr !important;
    }

    .dashboard-header {
        position: relative !important;
        box-shadow: none !important;
    }

    .dashboard-footer {
        border-top: 1px solid #000;
    }
}