/* ==========================================================================
   Responsive – Tablet & small laptop (≤ 1024px)
   ========================================================================== */

@media (max-width: 1024px) {
  body {
    padding: 1.25rem;
  }

  body.auth-authenticated {
    padding: 0.9rem 0.9rem 0.9rem calc(var(--menu-width) + 0.9rem);
  }

  #auth-gate {
    min-height: calc(100vh - 6rem);
  }
}

/* ==========================================================================
   Responsive – Mobile & tablet portrait (≤ 768px)
   ========================================================================== */

@media (max-width: 768px) {
  body {
    padding: 1rem;
  }

  body.auth-authenticated {
    --menu-width-expanded: 210px;
    --menu-width-collapsed: 64px;
    padding: 0.75rem 0.75rem 0.75rem calc(var(--menu-width) + 0.75rem);
  }

  #auth-gate-card {
    padding: 1.5rem;
    border-radius: 16px;
  }

  /* Header: stack nav */
  header {
    justify-content: flex-end;
  }

  #header-actions {
    width: 100%;
    align-items: stretch;
  }

  #theme-toggle {
    justify-content: flex-start;
    width: 100%;
  }

  body.auth-guest #header-actions {
    flex-direction: row;
  }

  #auth-controls {
    width: 100%;
  }

  h2 {
    font-size: 1.1rem;
  }

  /* Touch-friendly tap targets */
  button {
    min-height: 44px;
  }

  select, input[type="date"] {
    min-height: 44px;
  }

  /* Submenu: full width on mobile */
  .submenu {
    min-width: 100%;
  }

  #main-nav {
    width: 100%;
  }

  #auth-email,
  #auth-password {
    width: 100%;
  }

  .nav-item {
    flex: 1 1 auto;
  }

  .nav-btn {
    width: 100%;
  }

  #app-top-row {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  #project-switcher-wrap {
    order: 2;
    width: 100%;
    margin-left: 0;
    align-items: stretch;
    gap: 0;
  }

  #project-switcher-fields {
    width: 100%;
    grid-template-columns: 1fr;
  }

  #project-switcher-client-select,
  #project-switcher-project-select {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  #top-profile-wrap {
    order: 1;
    margin-left: auto;
  }
}

/* ==========================================================================
   Responsive – Small phone (≤ 480px)
   ========================================================================== */

@media (max-width: 480px) {
  body {
    padding: 0.75rem;
  }

  body.auth-guest #header-actions {
    flex-direction: column;
    align-items: stretch;
  }
}