/* Phone navigation (mobile-tabbar.js): bottom tab bar, "Thêm" sheet and header bell, ≤720px only. */
.mtab-bar,
.mtab-sheet-backdrop,
.mtab-header-bell { display: none; }

@media (max-width: 720px) {
  #view-dashboard:not(.hide) .mtab-bar {
    position: fixed; inset: auto 0 0 0; z-index: 120;
    display: flex; align-items: stretch;
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
    background: var(--list-surface); border-top: 1px solid var(--list-line);
  }
  .mtab-item {
    position: relative; flex: 1 1 0; min-width: 0; min-height: 52px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    border: 0; border-radius: 10px; background: none; color: var(--list-muted);
    font: inherit; font-size: 11px; line-height: 14px; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mtab-item[hidden] { display: none; }
  .mtab-item span:not(.mtab-dot) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mtab-item.is-active { color: var(--list-ink); font-weight: 600; }
  .mtab-item.is-active svg { stroke-width: 2.1; }
  .mtab-item:active { background: var(--list-hover); }
  .mtab-item:focus-visible,
  .mtab-sheet-item:focus-visible,
  .mtab-header-bell:focus-visible { outline: 2px solid var(--list-ink); outline-offset: -2px; }
  .mtab-dot { position: absolute; top: 8px; left: calc(50% + 8px); width: 8px; height: 8px; border-radius: 50%; background: #ff5630; }

  #view-dashboard:not(.hide) .mtab-sheet-backdrop:not([hidden]) {
    position: fixed; inset: 0; z-index: 150; /* above the sticky header (140) */
    display: flex; align-items: flex-end;
    background: rgba(22, 28, 36, .48);
  }
  .mtab-sheet {
    width: 100%; padding: 8px 12px calc(12px + env(safe-area-inset-bottom));
    border-radius: 16px 16px 0 0; background: var(--list-surface); color: var(--list-ink);
  }
  .mtab-sheet-grip { width: 36px; height: 4px; margin: 0 auto 8px; border-radius: 2px; background: var(--list-line); }
  .mtab-sheet-item {
    display: flex; align-items: center; gap: 14px; width: 100%; min-height: 52px; padding: 0 12px;
    border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; font-size: 15px; text-align: left; cursor: pointer;
  }
  .mtab-sheet-item[hidden] { display: none; }
  .mtab-sheet-item svg { flex: none; color: var(--list-muted); }
  .mtab-sheet-item:active { background: var(--list-hover); }
  .mtab-sheet-item .mtab-badge { position: static; margin-left: auto; }

  #view-dashboard .mtab-header-bell {
    position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px;
    border: 0; border-radius: 50%; background: none; color: var(--list-ink); cursor: pointer;
  }
  .mtab-header-bell svg { width: 20px; height: 20px; }
  .mtab-badge {
    position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px; background: #ff5630; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  }
  .mtab-badge[hidden] { display: none; }

  /* The tab bar replaces the hamburger menu, so the seal moves to the left edge and the actions take the rest. */
  #view-dashboard .mobile-nav-toggle,
  #view-dashboard #primary-navigation { display: none !important; }
  /* Header keeps only seal, bell and avatar; appearance lives in the "Thêm" sheet. */
  #view-dashboard .navbar-actions .appearance-trigger { display: none !important; }
  /* Avatar left, seal centred, bell right; navbar-actions dissolves so its children sit on the header grid. */
  html #view-dashboard#view-dashboard .header-shell { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important; }
  html #view-dashboard#view-dashboard .navbar-actions { display: contents !important; }
  html #view-dashboard#view-dashboard .header-user-dropdown { grid-column: 1 !important; grid-row: 1 !important; justify-self: start !important; }
  html #view-dashboard#view-dashboard .header-logo-lockup { grid-column: 2 !important; grid-row: 1 !important; justify-self: center !important; }
  html #view-dashboard#view-dashboard .mtab-header-bell { grid-column: 3 !important; grid-row: 1 !important; justify-self: end !important; }

  /* Keep page ends and toasts clear of the bar. */
  #view-dashboard:not(.hide) { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  /* The region is absolute inside the content column; fixed keeps the toast on screen above the bar. */
  #notification-ambient-region { position: fixed !important; bottom: calc(72px + env(safe-area-inset-bottom)) !important; top: auto !important; }
  html #view-dashboard #mobile-notification-overlay { bottom: calc(60px + env(safe-area-inset-bottom)) !important; }
  /* Live blur behind the sticky header and every sticky table head re-renders on each scroll frame,
     which phones feel as jank; solid fills look the same at this size. */
  html #view-dashboard#view-dashboard .app-header { background: var(--list-surface) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  #view-dashboard .tasks-table thead th { backdrop-filter: none; -webkit-backdrop-filter: none; }

  /* Modals live in a lower stacking context than the bar, so the bar steps aside while one is open. */
  #view-dashboard:has(.modal-overlay:not(.hide)) .mtab-bar,
  #view-dashboard:has(.modal-overlay:not(.hide)) .mtab-sheet-backdrop { display: none !important; }
}