/* Phone navigation: a labelled tab bar at the bottom and a "+" button instead of the icon rail. */
.mobile-tabbar,
.mobile-fab { display: none; }

@media (max-width: 760px) {
  /* The collapsed icon rail is replaced by the tab bar; the full sidebar still slides in from «Меню». */
  .app.sidebar-collapsed .sidebar { display: none !important; }
  .app,
  .app.sidebar-collapsed { grid-template-columns: minmax(0, 1fr) !important; }
  .workspace { padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important; }
  .workspace #newTask { display: none !important; }

  .mobile-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    height: calc(62px + env(safe-area-inset-bottom)); padding: 4px 6px env(safe-area-inset-bottom);
    border-top: 1px solid #eae5f3; background: #ffffffF2; backdrop-filter: blur(10px);
  }
  .mobile-tabbar button {
    position: relative; display: grid; justify-items: center; align-content: center; gap: 3px;
    min-width: 0; padding: 4px 2px; border: 0; border-radius: 10px; background: transparent;
    color: #746c84; font: 500 11px/1.2 var(--app-font); cursor: pointer;
  }
  .mobile-tabbar button::before {
    content: ""; width: 22px; height: 22px; background: currentColor;
    -webkit-mask: var(--mobile-icon) center / 22px 22px no-repeat; mask: var(--mobile-icon) center / 22px 22px no-repeat;
  }
  .mobile-tabbar [data-page="home"] { --mobile-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.8 12 4l9 6.8'/%3E%3Cpath d='M5.5 10.5V20h13v-9.5'/%3E%3Cpath d='M9.5 20v-5h5v5'/%3E%3C/svg%3E"); }
  .mobile-tabbar [data-page="myTasks"] { --mobile-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 12l2.4 2.4L16.5 8.5'/%3E%3Cpath d='M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'/%3E%3C/svg%3E"); }
  .mobile-tabbar [data-page="inbox"] { --mobile-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5h16l-2 9H6l-2-9Z'/%3E%3Cpath d='M8 14.5a4 4 0 0 0 8 0'/%3E%3Cpath d='M5 18.5h14'/%3E%3C/svg%3E"); }
  .mobile-tabbar #mobileMenuButton { --mobile-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"><path d="M4 6h16M4 12h16M4 18h16"/></svg>'); }
  .mobile-tabbar button.active { color: #7047db; }
  .mobile-tabbar button.active::before { background: #7954d6; }
  .mobile-tabbar em {
    position: absolute; top: 2px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px; background: #d74d61; color: #fff; font: 600 11px/18px var(--app-font); font-style: normal; text-align: center;
  }
  .mobile-tabbar em[hidden] { display: none; }

  .mobile-fab {
    position: fixed; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 71;
    display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%;
    background: #7954d6; color: #fff; font: 400 30px/1 var(--app-font); cursor: pointer;
    box-shadow: 0 10px 24px #7954d655, 0 2px 6px #2b204826;
  }
  .mobile-fab:active { transform: scale(0.96); }
  /* Keep the button out of the way while a task card, dialog or the menu is open. */
  .app:is(.details-open, .sidebar-mobile-open) ~ .mobile-fab,
  .app:is(.details-open, .sidebar-mobile-open) .mobile-fab,
  body:has(dialog[open]) .mobile-fab,
  .app.sidebar-mobile-open .mobile-tabbar { display: none; }
  .app.is-locked .mobile-tabbar,
  .app.is-locked .mobile-fab { display: none; }
}

html[data-theme="dark"] .mobile-tabbar { border-color: #322c3f; background: #1c1924F2; }
html[data-theme="dark"] .mobile-tabbar button { color: #938ca5; }
html[data-theme="dark"] .mobile-tabbar button.active { color: #a88bf5; }
html[data-theme="dark"] .mobile-tabbar button.active::before { background: #a88bf5; }

@media (max-width: 760px) {
  /* Project header: title and the ••• menu on one line. */
  .workspace .topbar { flex-wrap: nowrap !important; align-items: center !important; gap: 10px !important; }
  .workspace .project-heading { min-width: 0 !important; flex: 1 1 auto !important; }
  .workspace .project-heading > div { min-width: 0 !important; }
  .workspace #projectTitle { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
  .workspace .top-actions { flex: 0 0 auto !important; flex-wrap: nowrap !important; margin: 0 !important; }

  /* Toolbar: search on the first row, filters / mine / sort on the second. */
  .workspace #filters .filter-row { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
  .workspace #filters #searchInput { grid-column: 1 / -1 !important; grid-row: 1 !important; width: 100% !important; min-width: 0 !important; }
  .workspace #filters #toggleFilters { grid-column: 1 !important; grid-row: 2 !important; min-width: 0 !important; width: 100% !important; }
  .workspace #filters #boardMyTasks { grid-column: 2 !important; grid-row: 2 !important; min-width: 0 !important; width: 100% !important; }
  .workspace #filters #sortFilter { grid-column: 3 !important; grid-row: 2 !important; min-width: 0 !important; width: 100% !important; }
  .workspace:not(:has(> .board-view)) #filters #sortFilter { grid-column: 2 / -1 !important; }
  .workspace #filters #taskToolbarAdd { display: none !important; }
  .workspace #filters .filter-row :is(button, select) { min-height: 42px !important; height: 42px !important; padding-inline: 8px !important; font-size: 13px !important; }
}
@media (max-width: 760px) {
  .workspace .topbar { display: flex !important; grid-template-columns: none !important; }
  .workspace .top-actions { grid-column: auto !important; justify-content: flex-end !important; }
}
@media (max-width: 760px) {
  .workspace .project-heading { display: flex !important; align-items: center !important; }
  .workspace .project-heading > div { flex: 1 1 auto !important; min-width: 0 !important; display: block !important; }
  .workspace .project-heading > #projectMembers { display: none !important; }
}
@media (max-width: 760px) {
  .workspace .top-actions { width: auto !important; max-width: none !important; }
  .workspace .project-heading { flex: 1 1 0 !important; }
}
@media (max-width: 760px) {
  /* The board fills the screen height; keep its bottom edge (quick add) above the tab bar. */
  .workspace > .board-view { margin-bottom: calc(76px + env(safe-area-inset-bottom)) !important; }
}