/* ============================================================
   RESPONSIVENESS OVERRIDES FOR ALL 10 DEVICE CATEGORIES

   +------+------------------+---------------------------------+
   | S.No | Width Range (px) | Category                        |
   +------+------------------+---------------------------------+
   | 1    | 0 – 321          | Mobile S                        |
   | 2    | 321 – 376        | Mobile M                        |
   | 3    | 376 – 426        | Mobile L                        |
   | 4    | 426 – 769        | Tablet Portrait                 |
   | 5    | 769 – 1025       | Tablet Landscape / Small Laptop |
   | 6    | 1025 – 1367      | Standard Laptop                 |
   | 7    | 1367 – 1921      | Large Laptop / 1080p Screens    | ← DEFAULT
   | 8    | 1921 – 2561      | Desktop / 1440p Screens         |
   | 9    | 2561 – 3841      | 4K UHD Screens                  |
   | 10   | 3841+            | Beyond 4K                       |
   +------+------------------+---------------------------------+

   BOUNDARY VALUES: each upper bound equals the next lower bound.
   ============================================================ */

/* 1. Mobile S: 0 – 321px */
@media (max-width: 321px) {
    html { font-size: 11px; }
    #middleRow { position: relative; }
    .sidebar { position: absolute; inset: 0; z-index: 1; display: none; padding: 10px; width: 75%; }
    .sidebar.sidebar-open { display: block; }
    #mainContent.dimmed { filter: brightness(0.5); pointer-events: none; transition: filter 0.25s ease; }
}

/* 2. Mobile M: 321 – 376px */
@media (min-width: 321px) and (max-width: 376px) {
    html { font-size: 12px; }
    #middleRow { position: relative; }
    .sidebar { position: absolute; inset: 0; z-index: 1; display: none; padding: 11px; width: 71%; }
    .sidebar.sidebar-open { display: block; }
    #mainContent.dimmed { filter: brightness(0.5); pointer-events: none; transition: filter 0.25s ease; }
}

/* 3. Mobile L: 376 – 426px */
@media (min-width: 376px) and (max-width: 426px) {
    html { font-size: 12px; }
    #middleRow { position: relative; }
    .sidebar { position: absolute; inset: 0; z-index: 1; display: none; padding: 12px; width: 68%; }
    .sidebar.sidebar-open { display: block; }
    #mainContent.dimmed { filter: brightness(0.5); pointer-events: none; transition: filter 0.25s ease; }
}

/* 4. Tablet Portrait: 426 – 769px */
@media (min-width: 426px) and (max-width: 769px) {
    html { font-size: 13px; }
    #middleRow { position: relative; }
    .sidebar { position: absolute; inset: 0; z-index: 1; display: none; padding: 13px; width: 46%; }
    .sidebar.sidebar-open { display: block; }
    #mainContent.dimmed { filter: brightness(0.5); pointer-events: none; transition: filter 0.25s ease; }
}

/* 5. Tablet Landscape / Small Laptop: 769 – 1025px */
@media (min-width: 769px) and (max-width: 1025px) {
    html { font-size: 14px; }
    #middleRow { position: relative; }
    .sidebar { position: absolute; inset: 0; z-index: 1; display: none; padding: 14px; width: 30%; }
    .sidebar.sidebar-open { display: block; }
    #mainContent.dimmed { filter: brightness(0.5); pointer-events: none; transition: filter 0.25s ease; }
}

/* 6. Standard Laptop: 1025 – 1367px */
@media (min-width: 1025px) and (max-width: 1367px) {
    html { font-size: 14px; }
    .sidebar { flex: 0 0 18%; display: block; }
    .sidebar.sidebar-collapsed { display: none; }
}

/* 7. Large Laptop / 1080p Screens: 1367 – 1921px (DEFAULT) */
@media (min-width: 1367px) and (max-width: 1921px) {
    html { font-size: 16px; }
    .sidebar { flex: 0 0 16.666%; display: block; }
    .sidebar.sidebar-collapsed { display: none; }
}

/* 8. Desktop / 1440p Screens: 1921 – 2561px */
@media (min-width: 1921px) and (max-width: 2561px) {
    html { font-size: 18px; }
    .sidebar { flex: 0 0 14%; display: block; }
    .sidebar.sidebar-collapsed { display: none; }
}

/* 9. 4K UHD Screens: 2561 – 3841px */
@media (min-width: 2561px) and (max-width: 3841px) {
    html { font-size: 22px; }
    .sidebar { flex: 0 0 12%; display: block; }
    .sidebar.sidebar-collapsed { display: none; }
}

/* 10. Beyond 4K: 3841px+ */
@media (min-width: 3841px) {
    html { font-size: 28px; }
    .sidebar { flex: 0 0 10%; display: block; }
    .sidebar.sidebar-collapsed { display: none; }
}