/* =====================================================================
   Streamline 360 — responsive.css
   Breakpoints: 1366, 1024, 768, 420
   ===================================================================== */

/* === 1366px: slightly tighter grids === */
@media (max-width: 1366px) {
  .sl-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* === 1024px: tablet landscape === */
@media (max-width: 1024px) {
  :root { --sl-sidebar-width: 220px; }

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

  .sl-hero h1 { font-size: 2rem; }

  /* Keep header right items from wrapping */
  .sl-app-header-right { gap: 8px; }
  .sl-username { display: none; }
}

/* === 768px: tablet portrait + mobile === */
@media (max-width: 768px) {

  /* Sidebar becomes slide-in overlay */
  .sl-sidebar {
    transform: translateX(-100%);
    z-index: 950;
  }

  .sl-sidebar.is-open {
    transform: translateX(0);
  }

  .sl-sidebar-close { display: flex; }

  .sl-sidebar-overlay.is-active { display: block; }

  .sl-app-wrapper { margin-left: 0; }

  .sl-sidebar-toggle { display: flex; }

  /* Grids */
  .sl-grid-4,
  .sl-grid-3 { grid-template-columns: repeat(2, 1fr); }

  /* Header — keep right items in one compact row */
  .sl-app-header { padding: 0 14px; gap: 8px; }
  .sl-app-header-right { gap: 8px; }
  .sl-username { display: none; }

  /* Public nav */
  .sl-public-nav {
    display: none;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background: var(--sl-bg-header);
    border-bottom: 1px solid var(--sl-border);
    flex-direction: column;
    padding: 16px 24px;
    gap: 12px;
    z-index: 400;
  }

  .sl-public-nav.is-open { display: flex; }
  .sl-mobile-menu-toggle { display: flex; }
  .sl-public-header { position: relative; }

  .sl-hero { padding: 48px 20px 40px; }
  .sl-hero h1 { font-size: 1.7rem; }
  .sl-hero p  { font-size: 0.95rem; }

  .sl-auth-box { padding: 28px 20px; }
  .sl-app-main { padding: 16px; }
}

/* === 420px: small mobile === */
@media (max-width: 420px) {
  .sl-grid-4,
  .sl-grid-3,
  .sl-grid-2 { grid-template-columns: 1fr; }

  .sl-grid-auto { grid-template-columns: 1fr; }

  .sl-hero h1 { font-size: 1.45rem; }
  .sl-hero-actions { flex-direction: column; align-items: stretch; }
  .sl-hero-actions .sl-btn { text-align: center; justify-content: center; }

  .sl-app-header { padding: 0 12px; }
  .sl-app-main   { padding: 12px; }

  /* Show only avatar + signout at very small sizes */
  .sl-header-badge { display: none; }
  .sl-username { display: none; }

  .sl-stat-value { font-size: 1.5rem; }
  .sl-auth-box { border-radius: var(--sl-radius-md); }
  .sl-footer-nav { gap: 12px; }
  .sl-panel { padding: 14px; }
}

/* === Prevent horizontal overflow === */
body, .sl-app-body, .sl-public-body, .sl-auth-body {
  overflow-x: hidden;
}

.sl-app-main, .sl-public-main {
  max-width: 100%;
  overflow-x: hidden;
}