@media (max-width: 640px){

  body{
    padding-top: 56px; /* або твоя реальна висота */
  }

  html {
    -webkit-text-size-adjust: 100%; 
  }

/* TRANSACTIONS LIST */
      .tx_row{
      display: grid;
      grid-template-columns: 1fr auto;
      grid-template-rows: auto auto auto;
      align-items: center;
      column-gap: 12px;
      row-gap: 6px;
      padding: 12px 14px;
      }

      /* LEFT */
      .tx_description{
      grid-column: 1;
      grid-row: 1;
      flex: initial;
      min-width: 0;

      /* стиль як був у category */
      font-size: 14px;
      color: #232629;

      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      }

      .tx_date{
      grid-column: 1;
      grid-row: 2;
      flex: initial;

      font-size: 12px;
      color: #8b8f94;
      white-space: nowrap;
      }

      /* RIGHT */
      .tx_amount{
      grid-column: 2;
      grid-row: 1;
      flex: initial;
      justify-self: end;
      align-self: center;

      font-size: 16px;
      white-space: nowrap;
      }

      .tx_category{
      grid-column: 2;
      grid-row: 2;
      flex: initial;
      min-width: 0;
      justify-self: end;
      text-align: right;

      /* стиль як був у description */
      font-size: 13px;
      font-weight: 500;
      color: #6b6f74;

      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 140px; /* щоб довгі назви не зносили все */
      }

      /* optional: третій рядок під лівим блоком лишається вільний */
      .tx_row .tx_actions{
      opacity: 1;
      pointer-events: auto;
      }

      .tx_actions{
      grid-column: 2;
      grid-row: 3;
      justify-self: end;
      }



      /* CONTENT TOPBAR */
      .page-head.vertical{
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  .page-title{
    font-size: 18px;
    line-height: 1.3;
    margin: 0;
  }

  /* ряд з кнопками */
  .actions-row{
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* "Додати" — окремим рядом, на всю ширину */
  .page-actions{
    width: 100%;
    display: flex;
  }
  .page-actions .btn{
    width: 100%;
    height: 44px;
    justify-content: center;
  }

  /* другий ряд: Вибір / Фільтри / (Видалити вибране коли є) */
  .page-actions-secondary{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  /* за замовчуванням: дві кнопки (toggle + filters) */
  #toggle-selection,
  #filtersToggle{
    height: 44px;
    width: 100%;
  }

  /* коли з’являється "видалити вибране" — хай займає весь ряд */
  #delete-selected{
    grid-column: 1 / -1;
    height: 44px;
    width: 100%;
    justify-content: center;
  }

  /* підчищаємо дрібні відступи, якщо десь були */
  .page-actions .btn,
  .page-actions-secondary .btn{
    padding: 0 12px;
    white-space: nowrap;
  }

  /* активні фільтри — нормальний перенос */
  .active-filters{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }

  .filter-tag{
    max-width: 100%;
  }

  .clear-all-filters{
    width: 100%;
    text-align: left;
    padding-top: 4px;
  }
      

      /* TRANSACTION FORM */

      .form {
      padding: 0;
      max-width: 100%;
      }

      .field {
      margin-bottom: 16px;
      }


      .field input,
      .field select {
      height: 48px;
      font-size: 16px; /* iOS не зумить */
      }

      .radio-group {
      flex-direction: column;
      gap: 10px;
      }

      .radio-group label {
      width: 100%;
      height: 46px;
      }


      .buttons-box {
      flex-direction: column;
      gap: 10px;
      }

      .buttons-box .btn {
      width: 100%;
      height: 48px;
      }

      .field label {
      font-size: 14px;
      margin-bottom: 8px;
      }

      .form-actions {
      padding-left: 0;
      padding-right: 0;
      }

      .form-actions .btn {
      width: 100%;
      height: 48px;   /* як інпути */
      }

      .page-head {
      flex-direction: column;
      align-items: stretch;
      gap: 12px;
      }

      .page-actions {
      width: 100%;
      }

      .page-actions .btn {
      flex: 1;
      height: 44px;
      }

      .btn-neutral {
      height: 44px;
      padding: 0 16px;
      }


      .sidebar {
      position: fixed;
      top: 46px;
      left: 0;
      height: calc(100dvh - 46px);
      width: 270px;             
      flex: none;               
      z-index: 1000;

      transform: translateX(-105%);
      transition: transform 180ms ease;
      box-shadow: 10px 0 30px rgba(0,0,0,0.12);

      overflow: hidden;          /* щоб footer не “вилазив” */
      }

      /* відкритий стан */
      body.sb-open .sidebar {
      transform: translateX(0);
      }

      /* оверлей */
      .sidebar-overlay {
      display: block;
      position: fixed;
      inset: 46px 0 0 0;        /* під топбаром */
      background: rgba(0,0,0,0.35);
      z-index: 900;

      opacity: 0;
      pointer-events: none;
      transition: opacity 180ms ease;
      }

      body.sb-open .sidebar-overlay {
      opacity: 1;
      pointer-events: auto;
      }

      /* трошки компактніше на мобілці */
      .sidebar-scroll {
      padding: 16px;
      }

      .sidebar-menu li {
      margin-bottom: 12px;
      }

      .balances-list li {
      font-size: 13px;
      }

      .sidebar-footer {
      display: none;
      }

      .sidebar-header {
      display: block;
      padding: 30px 20px 20px 20px;
      background: #f1f3f5;                
      border-bottom: 1px solid #dfe0e1;
      }

      /* CATEGORIES LIST */

      .categories_list .tx_row{
      display: grid;
      grid-template-columns: 1fr auto;
      grid-template-rows: auto auto;
      align-items: center;
      column-gap: 12px;
      row-gap: 8px;
      padding: 12px 14px;
      }

      /* НАЗВА категорії — зверху зліва */
      .categories_list .tx_category{
      grid-column: 1;
      grid-row: 1;

      justify-self: start;
      text-align: left;

      font-size: 15px;
      font-weight: 600;
      color: #232629;

      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
      }

      /* ЛІЧИЛЬНИК — зверху справа */
      .categories_list .tx_amount{
      grid-column: 2;
      grid-row: 1;

      justify-self: end;
      align-self: center;

      font-size: 16px;
      font-weight: 800;
      white-space: nowrap;
      }

      /* ТИП (дохід/витрата) — під назвою */
      .categories_list .tx_date{
      grid-column: 1;
      grid-row: 2;

      justify-self: start;

      /* зробимо “хмаркою”, якщо хочеш */
      display: inline-flex;
      align-items: center;

      padding: 6px 12px;
      border-radius: 999px;
      background: #f1f3f5;
      color: #6b6f74;

      font-size: 10px;
      font-weight: 700;
      white-space: nowrap;
      width: fit-content;
      }

      /* під типом справа нічого — тому .tx_amount не чіпаємо */

      /* якщо хочеш, щоб "транзакцій" було тихіше */
      .categories_list .tx_amount .count_label{
      font-size: 12px;
      font-weight: 600;
      color: #8b8f94;
      margin-right: 6px;
      }



      /* TOPBAR */


      /* ЛІВО: бургер + лупа */

      .search-btn{
      display: inline-flex;
      }

      /* SEARCH */

      .topbar {
          display: grid !important;
          grid-template-columns: 1fr auto 1fr;
          grid-template-areas: 
              "controls logo user"
              "search search search";
          position: fixed !important;
          top: 0;
          left: 0;
          right: 0;
          z-index: 2000;
          height: auto !important;
          min-height: 46px;
          padding: 10px 12px !important;
          align-items: center;
          background-color: #181c1f; /* твій колір з початку */
          color: white;
      }

      .header-controls {
      grid-area: controls;
      display: flex;
      gap: 8px; /* Відступ між меню та лупою */
      justify-content: flex-start;
      }

      .user-box { 
      grid-area: user; 
      justify-self: end;
      }

      .user-box .user-box-a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border: 1px solid rgba(255,255,255,0.12); 
      background: transparent;
      color: inherit;
      border-radius: 10px;
      cursor: pointer;
      }

      .user-box:hover{
      background: rgba(255,255,255,0.06);
      }

      .search-box {
      display: none;
      grid-area: search;
      width: 100% !important;
      margin-top: 4px !important;
      }

      .search-box.show {
      display: flex !important;
      gap: 8px; /* Відступ між інпутом і кнопкою */
      align-items: flex-end; /* Вирівнюємо по низу */
      }

      .search-box .search-input {
      width: 100% !important;
      height: 44px;
      background-color: #f2f3f5 !important;
      color: #1c1e21 !important;
      border-radius: 12px;
      padding: 0 15px;
      font-size: 16px !important; 
      border: none;
      margin-top: 10px;
      }

      .search-box .search-button {
      height: 44px; /* Така ж висота як в інпута */
      color: white;
      padding: 0 20px;
      border-radius: 12px;
      font-size: 14px;
      font-weight: 600;
      text-align: center;
      cursor: pointer;
      }

      .search-box .search-button:active {
      opacity: 0.8;
      }

      /* ЦЕНТР: назва сайту завжди по центру екрана */
      .logo-box{
      position: absolute;
      grid-area: logo; 
      justify-self: center;
      white-space: nowrap;
      left: 50%;
      transform: translateX(-50%);
      width: auto;
      padding-left: 0;
      pointer-events: none;
      }

      .logo-title-link{
      pointer-events: auto;
      white-space: nowrap;
      }

      /* ПРАВО: вихід */
      .user-box{
      padding-left: 0;
      margin-left: auto;
      }

      .user-box .user-box-a{
      padding-right: 0;
      }

      /* Всі текстові поля та селекти */
      .filters-field, 
      .search-box .search-input, 
      input[type="text"], 
      input[type="number"], 
      input[type="date"], 
      select, 
      textarea {
      font-size: 16px !important;
      }

      /* 1. Головний фікс: змушуємо шапку завжди бути на всю ширину */
      .page-head.vertical {
      width: 100% !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: stretch !important; /* Це змусить дітей (кнопки) розтягуватись */
      }

      /* 2. Контейнер кнопок теж на всю ширину */
      .page-actions {
      display: flex !important;
      width: 100% !important;
      gap: 10px;
      margin-bottom: 10px; /* Відступ від фільтрів */
      }

      /* 3. Кнопки ділять місце порівну */
      .page-actions .btn,
      .page-actions a {
      flex: 1 !important;        /* Розтягнутися */
      width: auto !important;    /* Скинути фіксовану ширину, якщо була */
      justify-content: center;   /* Текст по центру */
      text-align: center;
      }

      /* Фікс для скролу на iOS */
      .filters-panel {
      /* Кажемо браузеру: якщо скрол дійшов до межі цієї панелі, не передавай його на фон (body) */
      overscroll-behavior: contain;
      padding-bottom: calc(20px + env(safe-area-inset-bottom));

      /* Вмикаємо плавний інерційний скрол, який люблять Айфони */
      -webkit-overflow-scrolling: touch;

      /* На випадок, якщо панель дуже висока */
      max-height: 80vh; 
      overflow-y: auto;
      }

      .categories-container {
      display: flex;
      flex-direction: column; 
      max-height: 200px;     
      overflow-y: auto;      
      overflow-x: hidden;   

      /* Твої існуючі налаштування */
      width: 100% !important;
      box-sizing: border-box;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      padding-right: 10px;
      }


      .categories-container label {
      display: flex;
      align-items: center;
      width: 100%;
      padding: 8px 0;
      }

      .filters-footer {
      padding-bottom: env(safe-area-inset-bottom);
      margin-bottom: 100px; 
      }

      /* 2. Змушуємо самі чекбокси категорій переноситися на нові рядки */
      #filters-categories {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      width: 100%;
      }

      /* 3. Гарантуємо, що елемент details не ширший за батька */
      .categories-details {
      width: 100%;
      }

      /* 4. Якщо категорії йдуть списком у стовпчик — прибираємо зайві відступи */
      .filter-col {
      padding-left: 0 !important; /* Скидаємо той відступ зліва, що ми додавали раніше */
      width: 100%;
      }

      .categories-search-box{ 
        width: 100%;
      }

      .profile__row{
        grid-template-columns: 1fr;
        gap: 6px;
      }