/* ============================================
   Responsive Design - Tablet & Mobile
   ============================================ */

@media (max-width: 1400px) {
    :root {
        --sidebar-width: 280px;
    }

    .header-content {
        gap: 16px;
    }

    .header-metrics {
        gap: 16px;
    }
}

@media (max-width: 1200px) {
    .main-content {
        grid-template-columns: 1fr;
    }

    .sidebar-left,
    .sidebar-right {
        position: fixed;
        top: 70px;
        bottom: 0;
        z-index: 200;
    }

    .sidebar-left {
        left: -320px;
        transition: left 0.3s ease;
    }

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

    .sidebar-right {
        right: -320px;
        transition: right 0.3s ease;
    }

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

    .panel-tab {
        display: block !important;
    }
}

@media (max-width: 768px) {
    .header {
        padding: 12px 16px;
    }

    .header-content {
        flex-wrap: wrap;
    }

    .logo h1 {
        font-size: 16px;
    }

    .view-btn span:last-child {
        display: none;
    }

    .header-metrics {
        width: 100%;
        justify-content: space-around;
        gap: 12px;
    }

    .metric-label {
        font-size: 10px;
    }

    .metric-value {
        font-size: 16px;
    }

    .context-cell.main {
        width: 100%;
        max-width: 320px;
    }

    .context-cell.secondary {
        width: 220px;
    }

    .overview-cell {
        width: 160px;
        min-height: 110px;
    }

    .floating-toolbar {
        bottom: 20px;
        padding: 6px;
    }
}

/* Made with Bob */