/* Responsive Breakpoints (Desktop -> Laptop -> Tablet -> Mobile) */
@media (max-width: 1199.98px) {
  :root {
    --sidebar-width: 240px;
    --text-display: 2rem;
  }
}

@media (max-width: 991.98px) {
  .expo-stat-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .portal-sidebar {
    position: fixed;
    left: 0;
    top: var(--topbar-height);
    bottom: 0;
    transform: translateX(-100%);
    box-shadow: var(--shadow-lg);
  }

  .portal-sidebar.mobile-open {
    transform: translateX(0);
  }

  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 1018;
  }

  .sidebar-backdrop.show {
    display: block;
  }
}

@media (max-width: 767.98px) {
  :root {
    --text-display: 1.65rem;
    --text-h1: 1.4rem;
    --text-h2: 1.2rem;
  }

  .portal-content {
    padding: 1rem;
  }

  .portal-header {
    padding: 0 1rem;
  }

  .slot-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .notif-dropdown-menu {
    width: 300px;
  }
}

@media (max-width: 575.98px) {
  .expo-stat-strip {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }

  .demo-switcher-bar {
    padding: 0.45rem 0.65rem;
  }
}