/* Budgetly 3.12 – små skärmar. Större skärmar behåller befintlig layout. */
.mobile-app-header { display: none; }
.mobile-menu-backdrop[hidden] { display: none !important; }
@media (max-width: 768px) {
  html, body { max-width: 100%; overflow-x: clip; }
  .app-container { display: block; min-width: 0; }
  .mobile-app-header {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 50;
    height: 62px; padding: 0 16px;
    padding-top: env(safe-area-inset-top, 0px);
    background: var(--sidebar); border-bottom: 1px solid var(--border);
  }
  .mobile-app-logo { font-size: 21px; font-weight: 800; letter-spacing: -.8px; }
  .mobile-app-logo span { color: var(--primary); }
  .mobile-menu-toggle, .mobile-quick-add {
    border: 1px solid var(--border); border-radius: 12px;
    color: var(--text-primary); background: var(--input-surface);
    width: 42px; height: 42px; font-size: 24px; cursor: pointer;
    display: grid; place-items: center;
  }
  .mobile-quick-add { color: var(--primary); font-size: 30px; }
  .mobile-menu-backdrop:not([hidden]) {
    display: block; position: fixed; inset: 0; z-index: 70;
    background: rgba(10, 10, 25, .55);
  }
  .sidebar {
    display: flex; position: fixed; inset: 0 auto 0 0; z-index: 80;
    width: min(86vw, 340px); height: 100dvh;
    padding: calc(20px + env(safe-area-inset-top, 0px)) 18px 24px;
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(-105%); visibility: hidden;
    transition: transform .22s ease, visibility .22s ease;
    box-shadow: 15px 0 45px rgba(0,0,0,.2);
  }
  .sidebar.mobile-open { transform: translateX(0); visibility: visible; }
  .sidebar .navigation { display: flex; flex-direction: column; }
  .sidebar .logo { margin-bottom: 18px; }
  body.mobile-menu-open { overflow: hidden; }
  .main-content { width: 100%; min-width: 0; padding: 20px 14px calc(32px + env(safe-area-inset-bottom, 0px)); }
  .topbar { margin-bottom: 22px; flex-direction: column; align-items: flex-start; gap: 12px; }
  .topbar h1 { font-size: clamp(25px, 7vw, 32px); }
  .topbar #addTransactionBtn { display: none; }
  .summary-grid, .transaction-summary-grid { grid-template-columns: 1fr !important; }
  .content-card, .summary-card, .month-navigation { min-width: 0; }
  .month-navigation { padding: 12px; }
  .transaction-item { min-width: 0; gap: 8px; flex-wrap: wrap; }
  .transaction-info { min-width: 0; overflow-wrap: anywhere; }
  .transaction-amount { white-space: nowrap; }
  .modal-overlay { padding: 8px; }
  .modal { width: min(100%, 560px); max-width: 100%; max-height: calc(100dvh - 16px); overflow-y: auto; }
  .profile-dialog { max-height: 92dvh; width: min(96vw, 520px); }
  .profile-dialog form { padding: 20px; }
  input, select, textarea { max-width: 100%; }
  .auth-gate { min-height: 100dvh; }
}
@media (max-width: 390px) {
  .main-content { padding-inline: 10px; }
  .content-card { padding: 15px; }
  .mobile-app-header { padding-inline: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}