/* ── Responsive rules ── */

@media (max-width: 768px) {
  html, body, #app-root {
    max-width: 100vw;
    overflow-x: hidden;
  }

  .desktop-sidebar {
    display: none !important;
  }

  .mobile-sidebar {
    display: flex !important;
  }

  .main-content-wrapper {
    margin-right: 0 !important;
  }

  .topnav {
    right: 0 !important;
  }

  .topnav-search {
    display: none !important;
  }

  .notif-panel-desktop {
    top: calc(64px + env(safe-area-inset-top, 0px) + 8px) !important;
    left: 12px !important;
    right: 12px !important;
    max-width: 380px !important;
    margin: 0 auto !important;
  }

  .profile-panel-desktop {
    top: calc(64px + env(safe-area-inset-top, 0px) + 8px) !important;
    left: 12px !important;
    right: 12px !important;
    max-width: 320px !important;
    margin: 0 auto !important;
  }

  .input-field, select.input-field {
    min-height: 44px;
    font-size: 16px !important;
  }

  .btn-primary, .btn-secondary {
    min-height: 44px;
  }

  .sidebar-item {
    min-height: 44px;
  }
}

@media (min-width: 769px) {
  .mobile-sidebar {
    display: none !important;
  }

  .mobile-backdrop {
    display: none !important;
  }
}

/* ── Safe area for iOS ── */
@supports (padding-top: env(safe-area-inset-top)) {
  @media (max-width: 768px) {
    .mobile-safe-top { padding-top: env(safe-area-inset-top); }
  }
}