/* wwwroot/assets/css/app.css */
/* TradingApp.ch — Custom Styles */

/* ---- Sidebar ---- */
.sidebar {
    background-color: #1a1a2e;
    border-right: 1px solid #333;
    overflow-y: auto;
    z-index: 100;
}

.sidebar .nav-link {
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

.sidebar .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.sidebar .nav-link.active {
    background-color: #0d6efd;
}

/* Vue cloak — hide template syntax before mount */
[v-cloak] { display: none; }

/* ---- KPI Cards ---- */
.kpi-card {
    background-color: #16213e;
    border-radius: 0.5rem;
    padding: 1rem;
    text-align: center;
    height: 100%;
}

.kpi-card .kpi-label {
    font-size: 0.75rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kpi-card .kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
}

/* ---- Value Colors ---- */
.positive { color: #4ecca3; }
.negative { color: #e74c3c; }
.neutral  { color: #f0c040; }

.kpi-value.positive { color: #4ecca3; }
.kpi-value.negative { color: #e74c3c; }
.kpi-value.neutral  { color: #f0c040; }

/* ---- Widget Panels ---- */
.widget {
    background-color: #16213e;
    border-radius: 0.5rem;
    padding: 1rem;
}

.widget-title {
    font-size: 0.75rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

/* ---- Tables ---- */
.table-dark th {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #888;
    border-bottom-color: #333;
}

.table-dark td {
    border-bottom-color: #2a2a3e;
    vertical-align: middle;
}

/* ---- Sector Colors ---- */
.sector-grundstoffe    { color: #4ecca3; }
.sector-industrie      { color: #e74c3c; }
.sector-basiskonsum    { color: #3498db; }
.sector-konsumgueter   { color: #e67e22; }
.sector-gesundheit     { color: #9b59b6; }
.sector-finanz         { color: #2980b9; }
.sector-komm           { color: #2ecc71; }
.sector-nichtbasis     { color: #c0392b; }
.sector-it             { color: #1abc9c; }
.sector-versorgung     { color: #f39c12; }
.sector-energie        { color: #8e44ad; }

/* ---- Refresh Spin Animation ---- */
.spin {
    animation: spin 1s linear infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ---- Data Staleness ---- */
.stale-warning {
    background-color: #856404;
    color: #fff3cd;
    padding: 0.25rem 0.75rem;
    border-radius: 0.25rem;
    font-size: 0.8rem;
}

.last-updated {
    font-size: 0.75rem;
    color: #666;
}

/* ---- Responsive: Mobile < 992px ---- */
@media (max-width: 991.98px) {
    /* Sidebar hidden on mobile — handled via offcanvas */
    .sidebar-desktop {
        display: none !important;
    }

    /* Main content full width on mobile */
    main.main-content {
        margin-left: 0 !important;
    }

    /* Mobile top bar */
    .mobile-topbar {
        background-color: #1a1a2e;
        border-bottom: 1px solid #333;
        padding: 0.5rem 1rem;
        position: sticky;
        top: 0;
        z-index: 1030;
    }

    /* Tables scroll horizontally on mobile */
    .table-responsive-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* KPI cards spacing on mobile */
    .kpi-card {
        margin-bottom: 0.75rem;
    }

    /* Filter rows wrap on mobile */
    .filter-row {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .filter-row > * {
        flex: 1 1 100%;
    }

    /* Dashboard widgets full width */
    .widget {
        margin-bottom: 1rem;
    }
}

/* Desktop >= 992px: sidebar fixed */
@media (min-width: 992px) {
    .sidebar-desktop {
        display: flex !important;
        position: fixed;
        top: 0;
        left: 0;
        width: 250px;
        min-height: 100vh;
    }

    main.main-content {
        margin-left: 250px;
    }

    .mobile-topbar {
        display: none !important;
    }
}

/* Offcanvas sidebar styling for mobile */
.offcanvas.sidebar-offcanvas {
    background-color: #1a1a2e;
    width: 250px;
}
.offcanvas.sidebar-offcanvas .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ---- Print ---- */
@media print {
    .sidebar, .btn-group, .no-print { display: none !important; }
    main { margin-left: 0 !important; }
    body { background: white !important; color: black !important; }
    .table-dark { background: white !important; color: black !important; }
    .table-dark th, .table-dark td { border-color: #ddd !important; color: black !important; }
    .widget { background: white !important; border: 1px solid #ddd; }
    .kpi-card { background: #f8f9fa !important; border: 1px solid #ddd; }
    .kpi-value.positive { color: #198754 !important; }
    .kpi-value.negative { color: #dc3545 !important; }
    canvas { max-height: 200px; }
}