Solution: Adaptive Dashboard Widget and Filter Panel Visibility

Problem description

Given an HTML page structured with the following elements:

• A container <div class="dashboard-container"> wrapping all elements

• Inside, <aside class="sidebar"> containing navigation icons and <span class="label"> for each link

• <div class="main-content"> containing:

  • <div class="filter-panel"> with input fields (collapsed by default)

  • <button class="filter-toggle">Filter</button> (positioned floating in corners of small viewports)

  • <section class="widgets"> holding:

    • <div class="widget-summary">—summary metrics

    • <div class="widget-detail detail-1">—detail widget 1

    • <div class="widget-detail detail-2">—detail widget 2

    • <div class="widget-detail detail-3">—detail widget 3

Write CSS to satisfy the following:

1. Mobile (< 480px):

   1. .widgets displays only .widget-summary at full width.

   2. Hide ...