/**
 * Responsive Styles
 * Media queries for tablet and mobile breakpoints.
 */

/* =========================================================================
 * TABLET (≤ 1100px)
 * ========================================================================= */

@media (max-width: 1100px) {
  .kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }

  #globalSearchInput {
    width: 140px;
  }

  .header-search-results {
    width: 340px;
  }
}

/* =========================================================================
 * MOBILE (≤ 800px)
 * ========================================================================= */

@media (max-width: 800px) {

  /* ── Show hamburger button ── */
  .hamburger-btn {
    display: flex;
  }

  /* ── Hide desktop header project selector + divider ── */
  .header-project-select {
    display: none;
  }

  .header-divider {
    display: none;
  }

  #projectSelectWrapper {
    display: none;
  }

  .header-search-wrapper {
    display: none;
  }

  /* ── Hide user name/role on mobile (keep avatar only) ── */
  .header-user-name,
  .header-user-role {
    display: none;
  }

  /* ── Show mobile sidebar header (close btn + project selector) ── */
  .mobile-sidebar-header {
    display: block;
  }

  /* ── Sidebar → fixed slide-out overlay ── */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    min-width: 280px;
    height: 100vh;
    z-index: 150;
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    box-shadow: none;
    overflow-y: auto;
  }

  body.mobile-sidebar-open .sidebar {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0, 0, 0, .18);
  }

  /* ── Layout adjustments ── */
  .kpi-row {
    grid-template-columns: 1fr;
  }

  .main-content {
    padding: 12px;
  }

  .page-header {
    flex-direction: column;
    gap: 8px;
  }

  .page-actions {
    width: 100%;
  }

  /* ── Prevent body scroll when sidebar is open ── */
  body.mobile-sidebar-open {
    overflow: hidden;
  }

  /* ── Header logo text: hide "Berater Dashboard" on very small screens ── */
  .header-logo {
    font-size: .85rem;
  }
}

/* =========================================================================
 * VERY SMALL MOBILE (≤ 480px)
 * ========================================================================= */

@media (max-width: 480px) {
  .header {
    padding: 0 10px;
  }

  .header-logo {
    font-size: 0; /* hide text */
  }

  .header-logo-icon {
    font-size: .5rem;
  }

  .sidebar {
    width: 260px;
    min-width: 260px;
  }
}